迎觀看indesign新手教程，小編帶大家學(xué)習(xí) InDesign 的基本工具和使用技巧，了解如何使用“屬性”面板、“頁面”面板和其他方法在文檔中的頁面之間導(dǎo)航。

使用InDesign可以創(chuàng)建多頁文檔，如小冊(cè)子、時(shí)事通訊、雜志、書籍等。使用多個(gè)頁面，探索向頁面文檔和非面向頁面文檔之間的區(qū)別。學(xué)習(xí)如何使用pages面板和其他一些方法導(dǎo)航文檔中的頁面。

打開文件，查看此文檔的第一頁，選擇「視圖」-「使頁面適合窗口」。

在Mac上按幾下 Command — 鍵，即可縮小此文檔中的多個(gè)頁面。默認(rèn)情況下，InDesign文檔中的頁面垂直顯示。

每個(gè)頁面都有自己的粘貼板，它周圍的灰色區(qū)域可以放置無法打印的內(nèi)容。

現(xiàn)在這個(gè)文檔是一個(gè)非對(duì)頁文檔，因?yàn)樗挥幸豁摗７钦嫖臋n的示例包括雙面?zhèn)鲉巍⒚取?/p>

現(xiàn)在要理解對(duì)頁文檔和非對(duì)頁文檔之間的區(qū)別，首先要?jiǎng)?chuàng)建一個(gè)新文檔。要?jiǎng)?chuàng)建新文檔，選擇「文件」-「新建」-「文檔」。

在打開的「新建文檔」對(duì)話框中，選擇「打印」后，將在右側(cè)看到此「頁面」選項(xiàng)，將頁數(shù)更改為8，以便可以查看更多的頁面，保持「對(duì)頁」選項(xiàng)處于選中狀態(tài)，單擊「邊距和分欄」-「確定」。

打開文檔時(shí)，在Mac上按幾次Command — 鍵，縮頁面這樣就可以看到文檔中的所有頁面。

由于此文檔有對(duì)頁，因此這些頁彼此相鄰。在InDesign中，每套對(duì)頁稱為排列。例如，這個(gè)對(duì)頁文檔可以成為一本雜志或一本書。

在這里看到的第一頁是封面，這就是為什么它只有一頁開始。

現(xiàn)在，對(duì)頁文檔通常要像書籍或雜志一樣裝訂。當(dāng)你打開或關(guān)閉雜志或書籍時(shí)，頁面實(shí)際上是面對(duì)面的。還有一個(gè)右手頁和一個(gè)左手頁，例如，也許頁碼可以放在相對(duì)的角落里。

通過選擇「文件」-「關(guān)閉」，可以關(guān)閉此文件而不保存。

回到非正面頁面文檔中，選擇「視圖」-「使頁面適合窗口」。

現(xiàn)在將導(dǎo)航頁面，使用左側(cè)「工具」面板中的「抓手工具」從一頁拖動(dòng)到另一頁。

或者使用右邊的滾動(dòng)條從一頁轉(zhuǎn)到另一頁。

文檔中的所有頁面都可以在此頁面菜單右側(cè)的屬性面板中看到。

還將看到一個(gè)名為A-Master的頁面，它是母版頁或用于文檔的模板。

打開「頁面」面板查看文檔中的頁面，這是一種更容易可視化頁面的方法，尤其是在處理較長(zhǎng)文檔時(shí)。打開「頁面」面板，選擇「窗口」-「頁面」，它應(yīng)該在右側(cè)的此處打開。

在「頁面」面板中的上半部分看到與文檔模板類似的母版頁。

面板的下半部分是文檔中以縮略圖表示的頁面。

在「頁面」面板中從一個(gè)頁面移動(dòng)到另一個(gè)頁面，雙擊頁碼5的縮略圖。

該頁面現(xiàn)在是文檔窗口中的活動(dòng)頁面，因?yàn)椤疙撁妗姑姘逯许撁婵s略圖之間的數(shù)字高亮顯示。

還可以在狀態(tài)欄的頁面下方看到頁碼。單擊此菜單，可以在底部看到可用頁數(shù)和母版頁。

從該菜單中選擇另一個(gè)頁碼，如1，以在文檔窗口中顯示該頁。

還可以單擊這些箭頭導(dǎo)航到上一頁、下一頁等。

使用此菜單或這些箭頭導(dǎo)航時(shí)，注意「頁面」面板中的內(nèi)容，以查看所選內(nèi)容。

以上就是在 InDesign 中使用手動(dòng)工具導(dǎo)航的基本知識(shí)，使用“屬性和頁面”面板的滾動(dòng)條，甚至下面狀態(tài)欄中的“頁面”菜單，都可以讓您快速開始使用多頁面文檔。

indesign下載地址：Indesign 2021 for mac(Id 2021)https://www.macz.com/mac/7645.html?id=NzY4OTYwJl8mMjcuMTg2LjEyNS4zNw%3D%3D

期開始嘗試將新文章預(yù)發(fā)表，預(yù)發(fā)表的文章僅展示在公眾號(hào)主頁（不會(huì)群發(fā)），以供提前預(yù)覽，想要看新文章的可以在主頁查看，有問題歡迎隨時(shí)指出。新文章會(huì)在合適的時(shí)間群發(fā)給各位小伙伴！

全文約 5800 字，預(yù)計(jì)閱讀需要 20 分鐘

作為一名前端開發(fā)，Chrome Devtools 是最常用的工具之一，它提供了很多實(shí)用的調(diào)試功能。Chrome 團(tuán)隊(duì)也在一直積極地更新新版本，本文就來盤點(diǎn)自 Chrome 110 以來，Devtools 中新增的實(shí)用調(diào)試功能，總有一個(gè)你用的上！

Chrome 118

Elements > Styles 中自定義屬性查看

該版本中，在Elements面板的Styles選項(xiàng)中新增了一個(gè)自定義屬性部分。通過使用@property CSS 規(guī)則，可以明確地定義CSS自定義屬性，并在樣式表中進(jìn)行注冊(cè)，而無需編寫任何JavaScript代碼。

通過在Elements > Styles中懸停在屬性名稱上，可以查看其描述符并通過工具提示來查看已注冊(cè)屬性的詳細(xì)信息。點(diǎn)擊工具提示中的鏈接可以展開顯示已注冊(cè)屬性的部分。

搜索增強(qiáng)

現(xiàn)在搜索結(jié)果會(huì)顯示每行代碼中找到的所有匹配項(xiàng)。之前，每行代碼只顯示第一個(gè)匹配項(xiàng)。這種新的行為在搜索壓縮文件時(shí)特別有用。當(dāng)點(diǎn)擊搜索結(jié)果時(shí)，它會(huì)在編輯器中打開文件，并且不僅在垂直方向上滾動(dòng)到匹配位置，還會(huì)在水平方向上進(jìn)行滾動(dòng)。

此外，搜索功能得到了速度提升。下面是改變前（左側(cè)）和改變后（右側(cè)）的對(duì)比。

另外，搜索功能現(xiàn)在支持忽略列表，并且不會(huì)顯示已忽略文件的搜索結(jié)果。

Sources 面板改進(jìn)

現(xiàn)在可以通過拖放的方式重新排列 Sources 面板左側(cè)的邊欄。

現(xiàn)在，Sources面板具備以下功能：

• 對(duì)于以下腳本類型，可以對(duì)其中的內(nèi)聯(lián)JavaScript進(jìn)行打印美化：module、importmap、speculationrules。
• 對(duì)于包含JSON的importmap和speculationrules腳本類型，可以突出顯示其語法。

輔助功能改進(jìn)

DevTools 現(xiàn)在支持更多的導(dǎo)航按鍵操作：

• CSS Overview：使用上下箭頭在左側(cè)邊欄中導(dǎo)航到各個(gè)部分。
• Memory：在左側(cè)邊欄中，使用Tab鍵聚焦到快照旁邊的保存按鈕，然后按Enter鍵選擇文件夾。

Chrome 117

更快地本地覆蓋網(wǎng)頁內(nèi)容

優(yōu)化了本地覆蓋功能，因此可以在沒有訪問權(quán)限的情況下，通過 Network 面板輕松模擬遠(yuǎn)程資源的響應(yīng)頭和網(wǎng)頁內(nèi)容。

要覆蓋網(wǎng)頁內(nèi)容，需要打開 Network 面板，右鍵點(diǎn)擊一個(gè)請(qǐng)求，然后選擇“Override content”。

如果已經(jīng)在DevTools中設(shè)置了本地覆蓋但將其禁用了，現(xiàn)在 DevTools 會(huì)自動(dòng)啟用本地覆蓋功能。如果尚未設(shè)置本地覆蓋，DevTool s會(huì)在操作欄中提醒你選擇一個(gè)文件夾來存儲(chǔ)覆蓋內(nèi)容，并授權(quán) DevTools 訪問該文件夾。

設(shè)置完本地覆蓋后，DevTools 會(huì)進(jìn)入 Sources > Overrides > Editor 頁面，可以進(jìn)行網(wǎng)頁內(nèi)容的覆蓋操作。

請(qǐng)注意，在 Network 面板中，被覆蓋的資源會(huì)以“Saved.”的標(biāo)識(shí)顯示。將鼠標(biāo)懸停在圖標(biāo)上可以查看哪些內(nèi)容被覆蓋了。

覆蓋XHR和fetch請(qǐng)求內(nèi)容

現(xiàn)在還可以覆蓋XHR和fetch請(qǐng)求的內(nèi)容。通過這樣的覆蓋，即使后端和API尚未準(zhǔn)備好，也可以模擬API的響應(yīng)來調(diào)試網(wǎng)頁。

DevTools 目前支持以下請(qǐng)求類型的內(nèi)容覆蓋：圖像（例如avif、png）、字體、fetch和XHR、腳本（css和js）以及文檔（html）。對(duì)于不支持的類型，DevTools 現(xiàn)在會(huì)將“Override content”選項(xiàng)置灰。

隱藏Chrome擴(kuò)展請(qǐng)求

為了幫助開發(fā)者專注于編寫代碼，因此，Network 面板新增了一個(gè)過濾器，過濾掉了可能在Chrome中安裝的擴(kuò)展程序發(fā)送的無關(guān)請(qǐng)求。要過濾掉所有發(fā)送到chrome-extension:// URL的請(qǐng)求，可以勾選“Hide extension URLs”選項(xiàng)。

此外，DevTools 現(xiàn)在不會(huì)嘗試加載擴(kuò)展程序的源映射文件，因此將不會(huì)看到與代碼無關(guān)的“無法加載源映射”警告。另外，由代碼導(dǎo)致的類似警告現(xiàn)在會(huì)顯示在Sources面板底部的信息欄中，而不是控制臺(tái)中顯示。

HTTP狀態(tài)碼可讀性更強(qiáng)

現(xiàn)在在請(qǐng)求的頭部中，HTTP狀態(tài)碼旁邊會(huì)顯示易于理解的文本，以便更快地了解請(qǐng)求的處理情況。以往只能看到數(shù)字狀態(tài)碼，現(xiàn)在還提供了相應(yīng)的可讀性更強(qiáng)的描述性文本，使得解讀和理解請(qǐng)求的處理結(jié)果更加方便。

還可以將鼠標(biāo)懸停在請(qǐng)求表中的狀態(tài)碼上，以查看相同的文本信息。

JSON 子類型響應(yīng)格式美化

現(xiàn)在在請(qǐng)求的響應(yīng)選項(xiàng)卡中，對(duì)于具有應(yīng)用程序/[子類型]+json MIME子類型（如ld+json、hal+json等）的請(qǐng)求，會(huì)正確解析響應(yīng)并提供更美觀的顯示效果。可以對(duì)響應(yīng)數(shù)據(jù)進(jìn)行格式化，使其更易讀和易于理解。以前可能只能以原始的、緊湊的形式展示 JSON 數(shù)據(jù)，而現(xiàn)在提供了更好的可視化格式化效果。

性能改進(jìn)：查看網(wǎng)絡(luò)事件的獲取優(yōu)先級(jí)變化

Performance 面板現(xiàn)在在網(wǎng)絡(luò)軌跡中的事件摘要中顯示兩個(gè)優(yōu)先級(jí)字段：初始優(yōu)先級(jí)和（最終）優(yōu)先級(jí)，而不僅僅是單一的優(yōu)先級(jí)。通過這個(gè)額外的字段，可以看到事件的獲取優(yōu)先級(jí)是否發(fā)生了變化，并調(diào)整下載順序。

此外，還可以在 Network 面板的優(yōu)先級(jí)列中找到相同的信息，并通過啟用“Big request rows”設(shè)置來查看。

默認(rèn)啟用的源代碼設(shè)置：代碼折疊和自動(dòng)文件顯示

現(xiàn)在，默認(rèn)情況下啟用了 Settings > Preferences > Code folding 選項(xiàng)。該選項(xiàng)允許折疊代碼塊。

如果需要折疊代碼塊，將鼠標(biāo)懸停在代碼塊開始旁邊的行號(hào)上，然后單擊折疊圖標(biāo)即可。再次單擊{...}以展開該代碼塊。

此外，Settings > Preferences > Automatically reveal files in the sidebar選項(xiàng)現(xiàn)在也默認(rèn)啟用。該設(shè)置使得在切換標(biāo)簽頁時(shí)，Sources -> Page 中的文件樹會(huì)選擇當(dāng)前在編輯器中打開的文件。

在 Application 面板中調(diào)試預(yù)加載

Chrome 團(tuán)隊(duì)正在重新引入用戶可能導(dǎo)航到的未來頁面的完全預(yù)渲染。為了進(jìn)行調(diào)試，開發(fā)者工具將在 Application 面板中添加Preloading 部分。新的預(yù)取和預(yù)渲染（統(tǒng)稱為“導(dǎo)航預(yù)加載”）使用了 Speculation Rules API，而不是基于鏈接的資源提示。

在下面的演示中，在 Application > Preloading 部分，可以檢查以下內(nèi)容：

• Speculation Rules（規(guī)則推測(cè)）：列出當(dāng)前頁面上找到的所有規(guī)則集。
• Preloads（預(yù)加載）：列出來自規(guī)則集的所有預(yù)取和預(yù)渲染的URL。
• This Page（此頁面）：列出當(dāng)前頁面的預(yù)渲染狀態(tài)。

新顏色

DevTools 現(xiàn)在有一個(gè)與Chrome更好對(duì)齊的全新外觀，并使用了全新的配色方案。使用新顏色前后的對(duì)比如下圖所示。

Chrome 116

改進(jìn)缺失樣式表的調(diào)試

DevTools 進(jìn)行了多項(xiàng)改進(jìn)，可幫助您更快地識(shí)別和調(diào)試缺少樣式表的問題：

1. Sources > Page tree 現(xiàn)在只顯示成功部署和加載的樣式表，以減少混淆。
2. Sources > Editor現(xiàn)在會(huì)對(duì)失敗的@import、url()和href語句進(jìn)行下劃線和內(nèi)聯(lián)錯(cuò)誤提示框的顯示。

• 控制臺(tái)現(xiàn)在除了提供指向失敗請(qǐng)求的鏈接外，還提供指向未能加載的樣式表引用的精確行號(hào)的鏈接。

• Network 面板始終在"Initiator"列中提供了指向引用未能加載的樣式表的精確行號(hào)的鏈接。
• Issues 面板列出了所有加載樣式表的問題，包括損壞的URL、請(qǐng)求失敗以及錯(cuò)位的@import語句。

在Elements > Styles中的 Easing Editor（緩動(dòng)編輯器）中，現(xiàn)在支持線性時(shí)間函數(shù)。

使用 Easing Editor，可以輕松地通過點(diǎn)擊調(diào)整過渡時(shí)間函數(shù)和動(dòng)畫時(shí)間函數(shù)的值。在這個(gè)版本中，Easing Editor 得到了線性時(shí)間函數(shù)的支持。

要配置線性時(shí)間函數(shù)，點(diǎn)擊線性選擇器按鈕。要添加控制點(diǎn)，請(qǐng)?jiān)诰€上任意位置單擊。要?jiǎng)h除控制點(diǎn)，可以雙擊它。還可以選擇預(yù)設(shè)之一：linear, elastic, bounce, emphasized。

存儲(chǔ)桶支持和元數(shù)據(jù)視圖

Application > Storage部分現(xiàn)在支持存儲(chǔ)桶。存儲(chǔ)桶是彼此獨(dú)立的，因此可以為數(shù)據(jù)片段指定驅(qū)逐優(yōu)先級(jí)，并確保最有價(jià)值的數(shù)據(jù)不會(huì)被刪除。每個(gè)存儲(chǔ)桶可以存儲(chǔ)與已建立的存儲(chǔ)API（如IndexedDB和CacheStorage）相關(guān)的數(shù)據(jù)。

打開DevTools，導(dǎo)航到Application > Storage > Indexed DB，并運(yùn)行代碼。DevTools 現(xiàn)在會(huì)顯示存儲(chǔ)桶及其內(nèi)容。選擇一個(gè)存儲(chǔ)桶以查看其元數(shù)據(jù)。

現(xiàn)在，統(tǒng)一的元數(shù)據(jù)視圖也適用于本地存儲(chǔ)（local storage）、會(huì)話存儲(chǔ)（session storage）和緩存存儲(chǔ)（cache storage）部分。

Chrome 115

新的 CSS 子網(wǎng)格標(biāo)志

Elements 面板中為子網(wǎng)格（subgrid）添加了一個(gè)新的標(biāo)志。這個(gè)功能目前在Chrome Canary中處于實(shí)驗(yàn)階段。要檢查和調(diào)試嵌套的子網(wǎng)格，它從父網(wǎng)格繼承軌道的數(shù)量和大小，點(diǎn)擊標(biāo)志即可。它會(huì)切換一個(gè)覆蓋層，在元素視口的頂部顯示列、行及其編號(hào)。

查看選擇器特異性

在Elements > Styles中，將鼠標(biāo)懸停在選擇器名稱上，可在工具提示中查看它的特異性權(quán)重（優(yōu)先級(jí)）。

查看自定義 CSS 屬性值

在Elements > Styles中，將鼠標(biāo)懸停在自定義CSS屬性名稱上，可以查看其取值。

Sources 面板改進(jìn)

Sources 面板對(duì)于預(yù)處理的CSS文件，例如SASS、SCSS和LESS，增加了以下功能：

• 語法高亮：可以對(duì)CSS代碼進(jìn)行語法突出顯示，提高可讀性。
• 內(nèi)聯(lián)編輯器支持：這些編輯器類似于Elements > Styles中的編輯器，例如顏色選擇器和緩動(dòng)編輯器。可以直接在 Sources 面板中進(jìn)行編輯，方便修改CSS樣式。

設(shè)置條件斷點(diǎn)的快捷方式

現(xiàn)在可以使用快捷方式更快地設(shè)置條件斷點(diǎn)。要打開斷點(diǎn)對(duì)話框，請(qǐng)按住 Command (MacOS) 或 Control (Windows / Linux)，然后單擊 Sources > Editor 左側(cè)的行號(hào)。

默認(rèn)情況下忽略內(nèi)容腳本

現(xiàn)在 Settings > Ignore List > Content scripts injected by extensions默認(rèn)情況下是啟用的。啟用此設(shè)置后：

1. 調(diào)試器會(huì)忽略這些腳本，并不會(huì)在其拋出的異常處中斷。
2. 在"Sources > Call Stack"面板中，會(huì)跳過被忽略的幀。要在此處關(guān)閉跳過，勾選"Show ignore-listed frames"。
3. 在 Console 中，在堆棧跟蹤中折疊被忽略的幀。點(diǎn)擊"Show N more frames"進(jìn)行展開，點(diǎn)擊"Show less"進(jìn)行折疊。

此外，忽略列表的選項(xiàng)有了更清晰的文本。

Network > Response 格式美化

默認(rèn)情況下，Network > Response 現(xiàn)在會(huì)對(duì)壓縮過的響應(yīng)體進(jìn)行格式美化，與 Sources 面板類似。

此外，SVG 文件還具有語法突出顯示功能。

Chrome 114

支持調(diào)試 WebAssembly

Devtools 默認(rèn)開啟 Settings > Experiments > WebAssembly Debugging: Enable DWARF support 。

這個(gè)實(shí)驗(yàn)特性可以讓開發(fā)者在 Wasm 應(yīng)用中暫停執(zhí)行和調(diào)試 C 和 C++ 代碼，同時(shí)提供了所有的調(diào)試信息：

• 使用DWARF調(diào)試信息映射的原始源代碼。
• 可理解的函數(shù)名稱在調(diào)用堆棧中。
• 支持?jǐn)帱c(diǎn)等功能。

使用Elements面板和Issues標(biāo)簽調(diào)試自動(dòng)填充

Chrome的自動(dòng)填充功能可以根據(jù)保存的信息（如地址或支付信息）自動(dòng)填寫表單。為了幫助開發(fā)者輕松調(diào)試與自動(dòng)填充相關(guān)的問題，Elements面板現(xiàn)在可以用紅色波浪線突出顯示這些問題。

要查看此功能，需要啟用設(shè)置：Settings > Experiments > Highlights a violating node or attribute in the Elements panel DOM tree 。

在DOM樹中將鼠標(biāo)懸停在突出顯示的問題上，然后點(diǎn)擊"View issue"，就會(huì)打開Issues標(biāo)簽頁，其中列出了所有檢測(cè)到的問題并提供關(guān)于出錯(cuò)原因的線索。

Recorder 支持?jǐn)嘌?/h1>

現(xiàn)在，Recorder 面板允許在錄制過程中添加斷言，并提供所有運(yùn)行時(shí)數(shù)據(jù)。

要添加斷言，需要開始新的錄制，與頁面進(jìn)行交互，然后點(diǎn)擊"Add assertion"。Recorder 會(huì)插入一個(gè)waitForElement類型的步驟，可以進(jìn)行自定義。

還可以配置用來斷言的步驟，例如JavaScript中的條件語句、節(jié)點(diǎn)的子元素?cái)?shù)、元素可見性等。

Chrome 113

覆蓋網(wǎng)絡(luò)請(qǐng)求響應(yīng)頭

現(xiàn)在可以在 Network 面板中覆蓋響應(yīng)頭。之前，需要訪問Web服務(wù)器才能嘗試更改HTTP響應(yīng)頭。

通過響應(yīng)頭覆蓋，可以在本地原型化修復(fù)各種頭部，其中包括但不限于：

• 跨域資源共享頭
• 權(quán)限策略頭
• 跨域隔離頭

要覆蓋一個(gè)頭，可以導(dǎo)航至 Network > Headers > Response Headers，將鼠標(biāo)懸停在頭部的值上，點(diǎn)擊編輯，并進(jìn)行修改。

也可以添加自定義頭：

要在一個(gè)地方編輯所有的覆蓋設(shè)置，請(qǐng)編輯Sources > Overrides中的".headers"文件。在這個(gè)文件中，還可以點(diǎn)擊 Add override rule，使用通配符(*)來覆蓋多個(gè)請(qǐng)求。

Nuxt、Vite、Rollup 調(diào)試改進(jìn)

為了幫助開發(fā)者在調(diào)試過程中更快地找出問題，增強(qiáng)的堆棧跟蹤現(xiàn)在隱藏了來自 Nuxt 3.3 或更高版本生成的源代碼中的幀。DevTools會(huì)跳過這些幀：

• 在控制臺(tái)跟蹤中，在Show N more frames鏈接下方。
• 在"Sources > Call Stack"中，在Show ignore-listed frames下方。

為了實(shí)現(xiàn)這些改進(jìn)，DevTools、Nuxt、Vite 和 Rollup 團(tuán)隊(duì)合作采用了"X-Google-IgnoreList"源映射擴(kuò)展：

• Nuxt 3.3 Release
• Vite Server Options
• Rollup Configuration Options

Elements > Styles 中 CSS 改進(jìn)

為了幫助開發(fā)者更快地診斷CSS問題，Styles 面板現(xiàn)在會(huì)在以下情況下劃掉CSS屬性和值：

• 當(dāng)CSS屬性無效時(shí)，會(huì)劃掉整個(gè)CSS聲明（屬性和值）。
• 當(dāng)CSS屬性有效的，但值無效時(shí)，只會(huì)劃掉值部分。

現(xiàn)在，[animation](https://developer.mozilla.org/docs/Web/CSS/animation)簡(jiǎn)寫 CSS 屬性中包含了指向?qū)?yīng) @keyframes 規(guī)則的鏈接，這樣可以更快地在 Styles 面板中導(dǎo)航。

新增控制臺(tái)設(shè)置：回車時(shí)自動(dòng)完成

從之前的版本（112）開始，可以配置開發(fā)者工具控制臺(tái)在按下回車鍵時(shí)應(yīng)用自動(dòng)完成建議。

默認(rèn)情況下，要接受自動(dòng)完成建議，可以按Tab鍵或右箭頭。為了也能夠使用回車鍵進(jìn)行自動(dòng)完成，需要啟用設(shè)置Settings > Console > Accept autocomplete suggestion on Enter.

此外，另一個(gè)設(shè)置的文本現(xiàn)在更加用戶友好：Treat code evaluation as user action.

命令菜單強(qiáng)調(diào)編寫的文件

命令菜單中的快速打開對(duì)話框現(xiàn)在會(huì)將列入忽略列表的第三方文件變灰，以更加強(qiáng)調(diào)編寫的文件。

Chrome 112

使用 Lighthouse 分析導(dǎo)出為 Puppeteer 腳本

Recorder引入了一個(gè)新的導(dǎo)出選項(xiàng)：Puppeteer（包括 Lighthouse 分析）。使用Puppeteer，您可以自動(dòng)化和控制 Chrome。借助 Lighthouse 可以捕獲并提高網(wǎng)站的性能。

打開錄制，在點(diǎn)擊下載按鈕。選擇 Export 選項(xiàng)，然后保存為 .js 文件。

運(yùn)行Puppeteer腳本，以獲得一個(gè)Lighthouse報(bào)告，并保存在flow.report.html文件中。

CSS 文檔

現(xiàn)在，Elements > Styles 面板在鼠標(biāo)懸停在屬性上時(shí)會(huì)顯示一個(gè)簡(jiǎn)短的描述。

工具提示中還有一個(gè)“ Learn more”鏈接，該鏈接會(huì)轉(zhuǎn)到該屬性的MDN CSS參考文檔。

如果對(duì)CSS非常了解，可能會(huì)覺得這個(gè)提示很煩人。可以勾選 Don't show 來關(guān)閉所有工具提示。

要重新打開它們，就需要進(jìn)行如下設(shè)置：Settings > Preferences > Elements > Show CSS documentation tooltip。

CSS 嵌套支持

Elements > Styles 面板現(xiàn)在支持CSS嵌套語法，并將嵌套樣式應(yīng)用于相應(yīng)的元素。

在控制臺(tái)中標(biāo)記日志點(diǎn)和條件斷點(diǎn)

進(jìn)一步改進(jìn)增強(qiáng)的斷點(diǎn)用戶體驗(yàn)，控制臺(tái)現(xiàn)在標(biāo)記由斷點(diǎn)觸發(fā)的消息：

• console.* 調(diào)用帶橙色問號(hào)的條件斷點(diǎn)？
• 帶粉紅色兩個(gè)點(diǎn)的日志點(diǎn)消息..

現(xiàn)在，控制臺(tái)會(huì)給出適當(dāng)?shù)脑次募袛帱c(diǎn)的錨鏈接，而不再是Chrome創(chuàng)建的用于在V8上運(yùn)行任何JavaScript片段的VM<number>腳本。

單擊斷點(diǎn)消息旁邊的鏈接可直接跳轉(zhuǎn)到斷點(diǎn)編輯器。

調(diào)試時(shí)忽略不相關(guān)的腳本

為了幫助開發(fā)者專注于代碼的關(guān)鍵部分，現(xiàn)在可以直接從Sources > Page面板上的文件樹中將不相關(guān)的腳本添加到"忽略列表"中。

右鍵單擊任何腳本或文件夾，然后選擇與忽略相關(guān)的選項(xiàng)之一。可能會(huì)看到將腳本或文件夾添加到列表中或從列表中移除的選項(xiàng)。調(diào)試器會(huì)忽略添加到列表中的腳本，并在調(diào)用堆棧中省略它們。

所有添加到忽略列表的腳本和文件夾在文件樹中都會(huì)顯示為灰色。

如果選擇了一個(gè)被忽略的腳本，點(diǎn)擊Configure按鈕會(huì)轉(zhuǎn)到 Settings > Ignore List。

Chrome 111

使用“Styles”調(diào)試高清顏色

在Web上，將引入新的CSS顏色類型和色彩空間，DevTools 也引入了新工具來幫助開發(fā)人員創(chuàng)建、轉(zhuǎn)換和調(diào)試高清色彩。Styles面板現(xiàn)在支持CSS顏色級(jí)別4規(guī)范中提到的12種新色彩空間和7種新色域。

以下是使用color()、lch()、oklab()和color-mix()的CSS顏色定義例子。

使用 color-mix() 函數(shù)時(shí)，可以在Computed邊欄中查看最終顏色輸出。

顏色選擇器支持所有新的顏色空間，并有更多的功能。例如，點(diǎn)擊 color(display-p3 1 0 1) 的顏色色塊。還增加了一條色域邊界線，區(qū)分了 sRGB 和 display-p3 色域，以便更清楚地了解你所選顏色的色域。

DevTools 支持在不同的顏色格式之間進(jìn)行轉(zhuǎn)換。可以使用"更改顏色格式"圖標(biāo)來訪問轉(zhuǎn)換彈窗，或者在Styles面板中按住Shift鍵并點(diǎn)擊顏色進(jìn)行轉(zhuǎn)換。

在進(jìn)行轉(zhuǎn)換時(shí)，了解是否對(duì)顏色進(jìn)行了裁剪以適應(yīng)空間尺寸非常重要。DevTools會(huì)在轉(zhuǎn)換后的顏色旁邊放置一個(gè)警告圖標(biāo)，提醒該顏色是否被裁剪。

此外，還可以使用新的快捷鍵從屏幕上拾取顏色。按下"c"鍵激活吸管工具，按下Escape鍵取消激活。吸管工具僅在sRGB色彩空間中采樣顏色。例如，如果嘗試采樣超出sRGB色彩空間的color(display-p3 1 0 1)顏色，吸管工具將會(huì)將該顏色裁剪為sRGB空間中最接近的顏色，即洋紅色(color(display-p3 0.92 0.2 0.97))。

最后，顏色格式設(shè)置現(xiàn)已被棄用，為新的高清色彩格式騰出空間。

增強(qiáng)的斷點(diǎn)用戶體驗(yàn)

重新設(shè)計(jì)的斷點(diǎn)邊欄允許快速訪問常用功能，特別是停用、編輯和刪除斷點(diǎn)。

以下是一些亮點(diǎn)：

• 兩個(gè)暫停異常選項(xiàng)都移到了 斷點(diǎn) 窗格中，并標(biāo)上了文字，使其更易于解釋。

• 斷點(diǎn)按文件分組，按行號(hào)或列號(hào)排序，并且是可折疊的。

• 將鼠標(biāo)懸停在斷點(diǎn)或文件上時(shí)，可以使用新選項(xiàng)來停用、刪除和編輯斷點(diǎn)。

• 單擊編輯斷點(diǎn)按鈕打開斷點(diǎn)編輯器。從這里，可以輸入斷點(diǎn)條件或切換到日志點(diǎn)。

自定義 Recorder 快捷鍵

使用快捷鍵可以更快地記錄和重放用戶流程。Recorder 引入了幾個(gè)方便的快捷鍵，可加快用戶流程的錄制和重放速度。忘記快捷鍵了？沒問題，隨時(shí)點(diǎn)擊"?"按鈕查看所有快捷鍵。

也可以通過Settings菜單自定義這些快捷方式。

如果正在使用其他面板中，并且想要開始錄制用戶流程，可以使用DevTools中的命令菜單中的"Create a new recording"命令來開始錄制。

在 Application 面板中重新組織緩存

現(xiàn)在可以在 Application 面板的 Cache 部分找到 Cache Store ，而 Back/forward cache已移至Background Services部分。

心箭頭

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實(shí)心箭頭</title>
<style>
.con{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 50px auto;
    background-color:#ccc;
}
.arrow-top{
    border-bottom: 10px solid #fff;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    border-top: 10px solid #ccc;
    width: 0px;
    height: 0px;
    position: relative;
    top:-40px;
    left:100px;
}

.arrow-bottom{
    border-bottom: 10px solid #fff;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    border-top: 10px solid #ccc;
    width: 0px;
    height: 0px;
    position: relative;
    top:-40px;
    left:100px;
}
</style>
</head>
<body>
<div class="con">
<div class="arrow-top"> </div>
</div>
</body>
</html>

非實(shí)心箭頭