Chrome 提供的一些調(diào)試功能，在排查代碼故障時(shí)非常有幫助。事實(shí)上，由于谷歌瀏覽器提供的調(diào)試工具太多，很多都被隱藏了起來，等待你去探索。 聲明：本文已獲作者Ferenc Almasi翻譯授權(quán)。
以下為譯文： Chrome DevTools（開發(fā)者工具）團(tuán)隊(duì)每月（https://developers.google.com/web/updates/capabilities）都會在他們的網(wǎng)站上發(fā)布更新，你也可以在他們的官方 Twitter 賬戶（https://twitter.com/chromedevtools）上找到一些很棒的提示。如果你想了解更多關(guān)于 Chrome 提供的工具的信息，我強(qiáng)烈推薦查看這兩個(gè)信息來源。
在這篇文章中，我收集了 10 個(gè)我經(jīng)常使用但是別人可能不知道的功能。它們幫助我簡化了工作流程，可以在更短的時(shí)間內(nèi)完成更多的工作。
這里先從在控制臺中保持日志說起。假設(shè)在重新加載頁面之前或?qū)Ш桨l(fā)生時(shí)出現(xiàn)了問題，你會嘗試登錄控制臺，但所有內(nèi)容都被清除了。解決方法很簡單，但我很久以前就不知道了：
事件監(jiān)聽器的斷點(diǎn) 通常，當(dāng)用戶交互發(fā)生時(shí)會出現(xiàn)問題。捕捉這些事件來檢查在交互中運(yùn)行的位置和內(nèi)容非常有幫助。幸運(yùn)的是，我們可以通過訪問 Sources 選項(xiàng)卡，用 Ctrl + P 打開一個(gè) js 文件，并檢查其中的相關(guān)事件：
DOM 操作的斷點(diǎn) 對于 DOM 操作也可以添加斷點(diǎn)。通?？梢詳帱c(diǎn)在某節(jié)點(diǎn)接收到屬性更改上，例如添加了某個(gè) class 。在一個(gè)大型代碼倉庫中搜索相關(guān)代碼將耗費(fèi)大量時(shí)間，其實(shí)你可以簡單地為元素添加一個(gè)斷點(diǎn)，然后剩下的交給 DevTools 處理。為 DOM 節(jié)點(diǎn)操作添加斷點(diǎn)
代碼覆蓋率 有時(shí)候我們對代碼進(jìn)行性能優(yōu)化，會導(dǎo)致很多代碼沒有用了但是還沒及時(shí)清除。在覆蓋工具的幫助下，你可以分析資源并查看哪些行沒有執(zhí)行。如果你關(guān)注的不是所有交互，只執(zhí)行你所關(guān)注的交互操作有助于你獲取準(zhǔn)確的覆蓋率。你可以點(diǎn)擊 Ctrl + Shift + P 打開工具面板，然后點(diǎn)擊重新加載圖標(biāo)開始記錄，所有以紅色顯示的內(nèi)容都不會被執(zhí)行。
不必要的重繪也會導(dǎo)致性能問題。假設(shè)你的頁面上有一個(gè)倒計(jì)時(shí)，每次更新都會導(dǎo)致整個(gè)頁面重新繪制。你可以通過在 Render 選項(xiàng)卡中啟用 'paint flashing' 來解決這些問題，并查看哪些元素觸發(fā)了這些問題。同樣，Ctrl + Shift + P 會彈出工具欄。在 Rendering 選項(xiàng)卡上啟用重新繪制
動畫審查 既然上面討論了渲染，那么讓我們來看看如何調(diào)試 CSS 動畫。用 Ctrl + Shift + P 打開工具菜單，輸入“ animation” 它將為你打開動畫標(biāo)簽，這將記錄任何發(fā)生在網(wǎng)站上的動畫。你可以重播它們，看看它們的寬松程度，然后根據(jù)時(shí)間或持續(xù)時(shí)間調(diào)整：
截屏 我們經(jīng)常需要與其他人分享截圖來驗(yàn)證更改。如果你不得不重復(fù)多個(gè)步驟，這個(gè)任務(wù)可能會消耗時(shí)間：這可以在 DevTools 內(nèi)部完成。你可以從整個(gè)頁面、單個(gè)節(jié)點(diǎn)(被選中的節(jié)點(diǎn))或視圖中創(chuàng)建圖像：假設(shè)你正在調(diào)試一個(gè)問題，并且你的代碼中有兩個(gè)斷點(diǎn)。你正在進(jìn)行堆棧跟蹤，你會發(fā)現(xiàn)堆棧信息中大多數(shù)來自核心框架文件，如 React 或 jQuery。為了避免在調(diào)試器中包含這些核心文件，你可以對它們進(jìn)行黑盒處理，這意味著 DevTools 將跳過這些文件，以便你可以專注于自己的代碼。本地覆蓋是我最喜歡的一個(gè)，我發(fā)現(xiàn)自己使用它越來越頻繁。它是一個(gè)強(qiáng)大的工具，使你能夠加載生產(chǎn)文件的本地副本，并使用它們來替代捆綁的副本。當(dāng)一個(gè)問題只發(fā)生在特定的環(huán)境中而不能在本地復(fù)現(xiàn)時(shí)，這一點(diǎn)尤其有用。你可以在“Source” 選項(xiàng)卡下啟用 'Overrides'（重寫）。如果你沒有看到 Overrides 鏈接，點(diǎn)擊 Page 右側(cè)的鋸齒圖標(biāo)。你可以將漂亮的打印文件復(fù)制到你本地文件并對其進(jìn)行擴(kuò)展。重寫將通過頁面重新加載保持。我發(fā)現(xiàn)自己一直在使用 Lighthouse 面板，這是為了審計(jì)你的網(wǎng)站在各種指標(biāo)：性能，PWA，可訪問性，或搜索引擎優(yōu)化。你還可以選擇審計(jì)不同的設(shè)備以及模擬網(wǎng)絡(luò)連接，它為你提供了哪些可以改進(jìn)以及如何改進(jìn)的參考。你可以在“Audits” 選項(xiàng)卡下進(jìn)入“燈塔”，如果你沒有看到標(biāo)簽，只需點(diǎn)擊鋸齒符號來顯示隱藏的標(biāo)簽。生成報(bào)告后，可以將結(jié)果保存為 JSON 文件，稍后導(dǎo)入以進(jìn)行比較。
上面是必須知道的 10 個(gè) Chrome 開發(fā)工具特性，它們幫助我簡化了工作流程，并且在更短的時(shí)間內(nèi)完成了更多的工作。你每天使用的 Chrome 開發(fā)者工具的功能是什么? 請?jiān)谠u論中告訴我們。原文：https:///better-programming/10-must-know-features-of-chrome-devtools-94e4a4e530c5作者簡介：Ferenc Almasi，匈牙利前端開發(fā)者，熱衷于開發(fā)和設(shè)計(jì)新的交互式應(yīng)用程序。他還喜歡嘗試新技術(shù)，創(chuàng)造簡單而有吸引力的東西。
|
