整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
錄
· 引入Vue.js
· Vue.js是什么
· 聲明式渲染Hello World
· 條件與循環
· 處理用戶點擊
· 綜合示例
1. 引入Vue.js安裝Vue可以通過查看官方安裝教程來了解其他安裝 Vue 的選項。但對webpack Node.js等打包構建工具不了解的同學不推薦直接使用vue-cli搭建項目腳手架。
最簡單的方式是在本地創建的 .html 文件中通過如下方式引入 Vue：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2. Vue.js是什么？
Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層。不僅易于上手(對比其它框架)，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
學習Vue.js時要拋開jQuery手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。
· Vue.js是一種MVVM框架（Model-View-ViewModel），其中html是view層，js是model層，ViewModel是Vue.js的核心，
· 它是一個Vue實例。Vue實例是作用于某一個HTML元素上的。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
當創建了ViewModel實例后，雙向綁定的過程分為以下幾步：
1、上圖中的DOM Listeners和Data Bindings是實現雙向綁定的關鍵。
2、從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的數據；
3、從Model側看，當我們更新Model中的數據時，Data Bindings工具會幫我們更新頁面中的DOM元素。
3. Hello World
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM
3.1文本插值實現數據綁定
Vue.js有多種數據綁定的語法，最基礎的形式是文本插值，使用mustache語法，在運行時{{ message }}會被數據對象的message屬性替換，所以頁面上會輸出"Hello World!"。
<div id="app"> {{ message }}</div>
//這是定義視圖View
new Vue({
el: '#app', //指向view 將Vue實例掛載
data: {
message: 'Hello World!'
} //指向model
})
// 用來連接 View 與 Model
3.2 輸出純HTML
使用{{message}}的mustache語法只能將數據解釋為純文本，為了輸出HTML，可以使用v-html指令:
<div id="app">
<div v-html="text"></div>
</div>
new Vue({
el: '#app',
data: {
text:'<h1>hello</h1>'
}
})
關于指令：
Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性，
將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。
3.3雙向數據綁定
MVVM模式本身支持雙向綁定，在Vue.js中可以使用v-model指令在表單元素上創建雙向數據綁定。
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
這樣無論是改變輸入框的內容還是通過控制臺修改message的值，另一個值都會同時被改變。
3.4 給元素的屬性綁定數據
定義在Vue實例的data接口上的數據的綁定很靈活，既可以綁定在DOM節點內部，也可以綁在屬性上
<div id="app" v-bind:title='message' v-bind:style='color' v-once>
<a :href='url'>{{message}}</a>
</div>
v-once指令能夠讓你執行一次性的插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定。
var vm=new Vue({
el: '#app',
data:{
message: 'Google',
color: 'color:green',
url:'https://google.com'
}
})
Mustache 不能在 HTML 屬性中使用，綁定數據到節點屬性上時，需要使
用v-bind指令。利用這個指令將元素節點div的 title屬性和 Vue 實
例的 message屬性綁定到一起，從而建立數據與該屬性值的綁定。v-bind
指令可以縮寫為一個冒號，
如a標簽中的v-bind:href="url"的縮寫方式:href="url"。
<button v-bind:disabled="someDynamicCondition">Button</button>
v-bind指令對布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬
性會被移除。
4.條件與循環
4.1 根據條件表達式的值來執行元素的插入或者刪除行為的是v-if指令：
<div id="app">
<h1 v-if="num > 0">Num: {{ num }}</h1>
<p v-if="seen">now you see me</p>
</div>
var app=new Vue({
el: '#app',
data: {
num:12,
seen: true,
name:'WannaCry'
}
})
v-if指令可以綁定一個屬性值為布爾型的屬性，當值為真時，元素將
顯示，反之則消失。如果在控制臺設置app.seen=false，你會發現
頁面上的“now you see me ”消失了。
這個例子演示了我們不僅可以綁定 DOM 文本到數據，也可
以綁定 DOM 結構到數據。而且，Vue 也提供一個強大的過渡效果
系統，可以在 Vue 插入/更新/刪除元素時自動應用過渡效果。
4.2 v-show也是條件渲染指令，和v-if指令不同的是，使用
v-show指令的元素始終會被渲染到HTML，它只是簡單地為元素設置CSS的style屬性。
<h1 v-show="name.indexOf('Walker') >=0">Name: {{ name }}</h1>
在控制臺打開，可以看到<h1>Name:WannaCry</h1>
元素被設置了style="display:none"樣式。
4.3 可以用v-else指令為v-if或v-show添加一個“else塊”。
<div id="app">
<h1 v-if="age >=25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
</div>
v-else元素必須立即跟在v-if,v-else-if或v-show元素的后面——否
則它不能被識別。
var vm=new Vue({
el: '#app',
data: {
age:20,
name: 'Alan Walker',
sex: 'Man'
}
})
v-else元素是否渲染在HTML中，取決于前面v-if的值true還是
false。
如果v-if的值為false，則后面v-else的內容不會渲染到HTML。
4.4 數組數據循環渲染列表使用v-for指令：
<div class="title">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
v-for指令基于一個數組渲染一個列表，它和JavaScript的遍歷語法相似：
v-for="todo in todos"
todos是一個數組，todo是當前被遍歷的數組元素。
var app=new Vue({
el: '.title',
data: {
//定義todos數組
todos: [
{ text: 'study hard' },
{ text: 'find a girlfriend' },
{ text: 'around the world' }
]
}
})
頁面顯示如下：
· study hard
· find a girlfriend
· around the world
控制臺里，輸入 app.todos.push({ text: 'coding' })，你會發現列表中新添加了一項。
5. 處理用戶點擊
當用戶點擊頁面，我們可以用 v-on指令綁定一個事件監聽器，通過它調用我們在Vue 實例中定義的方法：
<div class="title">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉消息</button>
</div>
v-on指令用于給監聽DOM事件，它的用語法和v-bind是類似的。
new Vue({
el: '.title',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message=this.message.split('').reverse().join('')
//split()用于將字符串轉化為數組
//reverse()用于顛倒數組中元素順序
//join()用于將數組轉化為字符串
}
}
})
v-on指令可以縮寫為@符號。
6. 綜合示例
Vue+Bootstrap實現todolist的小Demo
一、Html樣式
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">username：</label>
<!-- 用v-model指令將input內的值與實例data內的值綁定在一起 -->
<input type="text" class="form-control"
id="username" v-model="username"
placeholder="Please enter your username">
</div>
<div class="form-group">
<label for="password">password:</label>
<input type="password" class="form-control" id="password"
v-model="password" placeholder="please enter your password">
</div>
<!-- 用v-on指令綁定點擊click事件 -->
<button type="button" class="btn btn-primary" v-on:click="add">submit</button>
<button type="reset" class="btn btn-danger">reset</button>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-center text-muted">用戶信息表</caption>
<tr class="text-danger">
<th class="text-center">id</th>
<th class="text-center">username</th>
<th class="text-center">password</th>
<th class="text-center">option</th>
</tr>
<tr class="text-center" v-for="(item,index) in myData">
<!-- 用v-for指令循環渲染列表 index為索引值 -->
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.pwd}}</td>
<td>
<button class="btn btn-info btn-sm"data-toggle="modal"
data-target="#myModal" v-on:click="nowIndex=index">delete</button>
</td>
</tr>
<!--用v-show指令 根據條件返回的布爾值決定是否渲染 -->
<tr v-show="myData.length !=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal" v-on:click="{
nowIndex=all,modalTitle='confirm delete all?'}">
delete all</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暫無數據...</p>
</td>
</tr>
</table>
<!-- 模態框 -->
<div role="dialog" class="modal fade bs-example-modal-sm"
id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body text-right">
<button class="btn btn-primary btn-sm" data-dismiss="modal" v-on:click="remove(nowIndex)">yes</button>
<button class="btn btn-danger btn-sm" data-dismiss="modal">no</button>
</div>
</div>
</div>
</div>
</div>
二、JS部分
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./libs/jquery-3.2.1.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./libs/vue.js"></script>
window.onload=function(){
new Vue({
el:"#box",
data:{
myData:[],
username:'',
password:'',
nowIndex:'',//當前用戶的索引
modalTitle:'confirm delete?'//模態框的title
},
methods:{
add:function(){
var name=this.username.trim();
var pwd=this.password.trim();
this.myData.push({
name:name,
pwd:pwd
});
this.username='';
this.password='';
},
remove:function(index){
if(index=='all'){
//刪除所有
this.myData=[];
}else{
//刪除索引為index的那條信息
this.myData.splice(index,1);
}
}
}
})
};
上圖是視圖的開發指導，官方給了個鏈接。
國內地址:
https://developer.android.google.cn/guide/topics/ui/index.html
view的使用
"直譯"
窗口中的所有視圖都排列在一棵樹中.
可以通過代碼或通過在一個或多個XML布局中指定視圖樹來添加視圖.
有許多專門的視圖子類可以充當控件，或者可以顯示文本，圖像或其他內容。
創建視圖樹后，通常可能需要執行幾種類型的常見操作.
"人話"
窗口也就是windows，windows上有視圖"樹",我們在畫頁面時其實就是往視圖樹上添加view，當然，添加的方式即可以是xml也可以是代碼的形式。下面那兩句話，舉個例子就是TextView的常見類型操作setText();
總結：
我們對整個view學習要建立一個體系，有一個脈絡。(自己腦海中有一個大體的脈絡，再去補充一個一個知識點)
view的基本概念->view如何使用->如何自定義view
之后我會分享我的"脈絡"，希望大家多多支持.
后續:
第一期：view的簡單介紹。
第二期：view添加到頁面的方式。
下一期：view的屬性和方法。
期開始嘗試將新文章預發表，預發表的文章僅展示在公眾號主頁（不會群發），以供提前預覽，想要看新文章的可以在主頁查看，有問題歡迎隨時指出。新文章會在合適的時間群發給各位小伙伴！
全文約 5800 字，預計閱讀需要 20 分鐘
作為一名前端開發，Chrome Devtools 是最常用的工具之一，它提供了很多實用的調試功能。Chrome 團隊也在一直積極地更新新版本，本文就來盤點自 Chrome 110 以來，Devtools 中新增的實用調試功能，總有一個你用的上！
該版本中，在Elements面板的Styles選項中新增了一個自定義屬性部分。通過使用@property CSS 規則，可以明確地定義CSS自定義屬性，并在樣式表中進行注冊，而無需編寫任何JavaScript代碼。
通過在Elements > Styles中懸停在屬性名稱上，可以查看其描述符并通過工具提示來查看已注冊屬性的詳細信息。點擊工具提示中的鏈接可以展開顯示已注冊屬性的部分。
現在搜索結果會顯示每行代碼中找到的所有匹配項。之前，每行代碼只顯示第一個匹配項。這種新的行為在搜索壓縮文件時特別有用。當點擊搜索結果時，它會在編輯器中打開文件，并且不僅在垂直方向上滾動到匹配位置，還會在水平方向上進行滾動。
此外，搜索功能得到了速度提升。下面是改變前（左側）和改變后（右側）的對比。
另外，搜索功能現在支持忽略列表，并且不會顯示已忽略文件的搜索結果。
現在可以通過拖放的方式重新排列 Sources 面板左側的邊欄。
現在，Sources面板具備以下功能：
DevTools 現在支持更多的導航按鍵操作：
優化了本地覆蓋功能，因此可以在沒有訪問權限的情況下，通過 Network 面板輕松模擬遠程資源的響應頭和網頁內容。
要覆蓋網頁內容，需要打開 Network 面板，右鍵點擊一個請求，然后選擇“Override content”。
如果已經在DevTools中設置了本地覆蓋但將其禁用了，現在 DevTools 會自動啟用本地覆蓋功能。如果尚未設置本地覆蓋，DevTool s會在操作欄中提醒你選擇一個文件夾來存儲覆蓋內容，并授權 DevTools 訪問該文件夾。
設置完本地覆蓋后，DevTools 會進入 Sources > Overrides > Editor 頁面，可以進行網頁內容的覆蓋操作。
請注意，在 Network 面板中，被覆蓋的資源會以“Saved.”的標識顯示。將鼠標懸停在圖標上可以查看哪些內容被覆蓋了。
現在還可以覆蓋XHR和fetch請求的內容。通過這樣的覆蓋，即使后端和API尚未準備好，也可以模擬API的響應來調試網頁。
DevTools 目前支持以下請求類型的內容覆蓋：圖像（例如avif、png）、字體、fetch和XHR、腳本（css和js）以及文檔（html）。對于不支持的類型，DevTools 現在會將“Override content”選項置灰。
為了幫助開發者專注于編寫代碼，因此，Network 面板新增了一個過濾器，過濾掉了可能在Chrome中安裝的擴展程序發送的無關請求。要過濾掉所有發送到chrome-extension:// URL的請求，可以勾選“Hide extension URLs”選項。
此外，DevTools 現在不會嘗試加載擴展程序的源映射文件，因此將不會看到與代碼無關的“無法加載源映射”警告。另外，由代碼導致的類似警告現在會顯示在Sources面板底部的信息欄中，而不是控制臺中顯示。
現在在請求的頭部中，HTTP狀態碼旁邊會顯示易于理解的文本，以便更快地了解請求的處理情況。以往只能看到數字狀態碼，現在還提供了相應的可讀性更強的描述性文本，使得解讀和理解請求的處理結果更加方便。
還可以將鼠標懸停在請求表中的狀態碼上，以查看相同的文本信息。
現在在請求的響應選項卡中，對于具有應用程序/[子類型]+json MIME子類型（如ld+json、hal+json等）的請求，會正確解析響應并提供更美觀的顯示效果?？梢詫憫獢祿M行格式化，使其更易讀和易于理解。以前可能只能以原始的、緊湊的形式展示 JSON 數據，而現在提供了更好的可視化格式化效果。
Performance 面板現在在網絡軌跡中的事件摘要中顯示兩個優先級字段：初始優先級和（最終）優先級，而不僅僅是單一的優先級。通過這個額外的字段，可以看到事件的獲取優先級是否發生了變化，并調整下載順序。
此外，還可以在 Network 面板的優先級列中找到相同的信息，并通過啟用“Big request rows”設置來查看。
現在，默認情況下啟用了 Settings > Preferences > Code folding 選項。該選項允許折疊代碼塊。
如果需要折疊代碼塊，將鼠標懸停在代碼塊開始旁邊的行號上，然后單擊折疊圖標即可。再次單擊{...}以展開該代碼塊。
此外，Settings > Preferences > Automatically reveal files in the sidebar選項現在也默認啟用。該設置使得在切換標簽頁時，Sources -> Page 中的文件樹會選擇當前在編輯器中打開的文件。
Chrome 團隊正在重新引入用戶可能導航到的未來頁面的完全預渲染。為了進行調試，開發者工具將在 Application 面板中添加Preloading 部分。新的預取和預渲染（統稱為“導航預加載”）使用了 Speculation Rules API，而不是基于鏈接的資源提示。
在下面的演示中，在 Application > Preloading 部分，可以檢查以下內容：
DevTools 現在有一個與Chrome更好對齊的全新外觀，并使用了全新的配色方案。使用新顏色前后的對比如下圖所示。
DevTools 進行了多項改進，可幫助您更快地識別和調試缺少樣式表的問題：
在Elements > Styles中的 Easing Editor（緩動編輯器）中，現在支持線性時間函數。
使用 Easing Editor，可以輕松地通過點擊調整過渡時間函數和動畫時間函數的值。在這個版本中，Easing Editor 得到了線性時間函數的支持。
要配置線性時間函數，點擊線性選擇器按鈕。要添加控制點，請在線上任意位置單擊。要刪除控制點，可以雙擊它。還可以選擇預設之一：linear, elastic, bounce, emphasized。
Application > Storage部分現在支持存儲桶。存儲桶是彼此獨立的，因此可以為數據片段指定驅逐優先級，并確保最有價值的數據不會被刪除。每個存儲桶可以存儲與已建立的存儲API（如IndexedDB和CacheStorage）相關的數據。
打開DevTools，導航到Application > Storage > Indexed DB，并運行代碼。DevTools 現在會顯示存儲桶及其內容。選擇一個存儲桶以查看其元數據。
現在，統一的元數據視圖也適用于本地存儲（local storage）、會話存儲（session storage）和緩存存儲（cache storage）部分。
Elements 面板中為子網格（subgrid）添加了一個新的標志。這個功能目前在Chrome Canary中處于實驗階段。要檢查和調試嵌套的子網格，它從父網格繼承軌道的數量和大小，點擊標志即可。它會切換一個覆蓋層，在元素視口的頂部顯示列、行及其編號。
在Elements > Styles中，將鼠標懸停在選擇器名稱上，可在工具提示中查看它的特異性權重（優先級）。
在Elements > Styles中，將鼠標懸停在自定義CSS屬性名稱上，可以查看其取值。
Sources 面板對于預處理的CSS文件，例如SASS、SCSS和LESS，增加了以下功能：
現在可以使用快捷方式更快地設置條件斷點。要打開斷點對話框，請按住 Command (MacOS) 或 Control (Windows / Linux)，然后單擊 Sources > Editor 左側的行號。
現在 Settings > Ignore List > Content scripts injected by extensions默認情況下是啟用的。啟用此設置后：
此外，忽略列表的選項有了更清晰的文本。
默認情況下，Network > Response 現在會對壓縮過的響應體進行格式美化，與 Sources 面板類似。
此外，SVG 文件還具有語法突出顯示功能。
Devtools 默認開啟 Settings > Experiments > WebAssembly Debugging: Enable DWARF support 。
這個實驗特性可以讓開發者在 Wasm 應用中暫停執行和調試 C 和 C++ 代碼，同時提供了所有的調試信息：
Chrome的自動填充功能可以根據保存的信息（如地址或支付信息）自動填寫表單。為了幫助開發者輕松調試與自動填充相關的問題，Elements面板現在可以用紅色波浪線突出顯示這些問題。
要查看此功能，需要啟用設置：Settings > Experiments > Highlights a violating node or attribute in the Elements panel DOM tree 。
在DOM樹中將鼠標懸停在突出顯示的問題上，然后點擊"View issue"，就會打開Issues標簽頁，其中列出了所有檢測到的問題并提供關于出錯原因的線索。
現在，Recorder 面板允許在錄制過程中添加斷言，并提供所有運行時數據。
要添加斷言，需要開始新的錄制，與頁面進行交互，然后點擊"Add assertion"。Recorder 會插入一個waitForElement類型的步驟，可以進行自定義。
還可以配置用來斷言的步驟，例如JavaScript中的條件語句、節點的子元素數、元素可見性等。
現在可以在 Network 面板中覆蓋響應頭。之前，需要訪問Web服務器才能嘗試更改HTTP響應頭。
通過響應頭覆蓋，可以在本地原型化修復各種頭部，其中包括但不限于：
要覆蓋一個頭，可以導航至 Network > Headers > Response Headers，將鼠標懸停在頭部的值上，點擊編輯，并進行修改。
也可以添加自定義頭：
要在一個地方編輯所有的覆蓋設置，請編輯Sources > Overrides中的".headers"文件。在這個文件中，還可以點擊 Add override rule，使用通配符(*)來覆蓋多個請求。
為了幫助開發者在調試過程中更快地找出問題，增強的堆棧跟蹤現在隱藏了來自 Nuxt 3.3 或更高版本生成的源代碼中的幀。DevTools會跳過這些幀：
為了實現這些改進，DevTools、Nuxt、Vite 和 Rollup 團隊合作采用了"X-Google-IgnoreList"源映射擴展：
為了幫助開發者更快地診斷CSS問題，Styles 面板現在會在以下情況下劃掉CSS屬性和值：
現在，[animation](https://developer.mozilla.org/docs/Web/CSS/animation)簡寫 CSS 屬性中包含了指向對應 @keyframes 規則的鏈接，這樣可以更快地在 Styles 面板中導航。
從之前的版本（112）開始，可以配置開發者工具控制臺在按下回車鍵時應用自動完成建議。
默認情況下，要接受自動完成建議，可以按Tab鍵或右箭頭。為了也能夠使用回車鍵進行自動完成，需要啟用設置Settings > Console > Accept autocomplete suggestion on Enter.
此外，另一個設置的文本現在更加用戶友好：Treat code evaluation as user action.
命令菜單中的快速打開對話框現在會將列入忽略列表的第三方文件變灰，以更加強調編寫的文件。
Recorder引入了一個新的導出選項：Puppeteer（包括 Lighthouse 分析）。使用Puppeteer，您可以自動化和控制 Chrome。借助 Lighthouse 可以捕獲并提高網站的性能。
打開錄制，在點擊下載按鈕。選擇 Export 選項，然后保存為 .js 文件。
運行Puppeteer腳本，以獲得一個Lighthouse報告，并保存在flow.report.html文件中。
現在，Elements > Styles 面板在鼠標懸停在屬性上時會顯示一個簡短的描述。
工具提示中還有一個“ Learn more”鏈接，該鏈接會轉到該屬性的MDN CSS參考文檔。
如果對CSS非常了解，可能會覺得這個提示很煩人。可以勾選 Don't show 來關閉所有工具提示。
要重新打開它們，就需要進行如下設置：Settings > Preferences > Elements > Show CSS documentation tooltip。
Elements > Styles 面板現在支持CSS嵌套語法，并將嵌套樣式應用于相應的元素。
進一步改進增強的斷點用戶體驗，控制臺現在標記由斷點觸發的消息：
現在，控制臺會給出適當的源文件中斷點的錨鏈接，而不再是Chrome創建的用于在V8上運行任何JavaScript片段的VM<number>腳本。
單擊斷點消息旁邊的鏈接可直接跳轉到斷點編輯器。
為了幫助開發者專注于代碼的關鍵部分，現在可以直接從Sources > Page面板上的文件樹中將不相關的腳本添加到"忽略列表"中。
右鍵單擊任何腳本或文件夾，然后選擇與忽略相關的選項之一?？赡軙吹綄⒛_本或文件夾添加到列表中或從列表中移除的選項。調試器會忽略添加到列表中的腳本，并在調用堆棧中省略它們。
所有添加到忽略列表的腳本和文件夾在文件樹中都會顯示為灰色。
如果選擇了一個被忽略的腳本，點擊Configure按鈕會轉到 Settings > Ignore List。
在Web上，將引入新的CSS顏色類型和色彩空間，DevTools 也引入了新工具來幫助開發人員創建、轉換和調試高清色彩。Styles面板現在支持CSS顏色級別4規范中提到的12種新色彩空間和7種新色域。
以下是使用color()、lch()、oklab()和color-mix()的CSS顏色定義例子。
使用 color-mix() 函數時，可以在Computed邊欄中查看最終顏色輸出。
顏色選擇器支持所有新的顏色空間，并有更多的功能。例如，點擊 color(display-p3 1 0 1) 的顏色色塊。還增加了一條色域邊界線，區分了 sRGB 和 display-p3 色域，以便更清楚地了解你所選顏色的色域。
DevTools 支持在不同的顏色格式之間進行轉換?？梢允褂?#34;更改顏色格式"圖標來訪問轉換彈窗，或者在Styles面板中按住Shift鍵并點擊顏色進行轉換。
在進行轉換時，了解是否對顏色進行了裁剪以適應空間尺寸非常重要。DevTools會在轉換后的顏色旁邊放置一個警告圖標，提醒該顏色是否被裁剪。
此外，還可以使用新的快捷鍵從屏幕上拾取顏色。按下"c"鍵激活吸管工具，按下Escape鍵取消激活。吸管工具僅在sRGB色彩空間中采樣顏色。例如，如果嘗試采樣超出sRGB色彩空間的color(display-p3 1 0 1)顏色，吸管工具將會將該顏色裁剪為sRGB空間中最接近的顏色，即洋紅色(color(display-p3 0.92 0.2 0.97))。
最后，顏色格式設置現已被棄用，為新的高清色彩格式騰出空間。
重新設計的斷點邊欄允許快速訪問常用功能，特別是停用、編輯和刪除斷點。
以下是一些亮點：
使用快捷鍵可以更快地記錄和重放用戶流程。Recorder 引入了幾個方便的快捷鍵，可加快用戶流程的錄制和重放速度。忘記快捷鍵了？沒問題，隨時點擊"?"按鈕查看所有快捷鍵。
也可以通過Settings菜單自定義這些快捷方式。
如果正在使用其他面板中，并且想要開始錄制用戶流程，可以使用DevTools中的命令菜單中的"Create a new recording"命令來開始錄制。
現在可以在 Application 面板的 Cache 部分找到 Cache Store ，而 Back/forward cache已移至Background Services部分。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
