前端容易忽略的 debugger 調試技巧

大家好，我是若川。我們日常開發碰到的很多問題，通過 debugger 都能快速定位問題，所以推薦這篇大家容易忽略的調試技巧。會定位問題，可以節省很多時間。也就是我經常說的工欲善其事，必先利其器。也是為什么我經常強調調試的原因之一。

點擊下方卡片關注我、加個星標

學習源碼整體架構系列、年度總結、JS基礎系列

本文結構

????- 系列文相關

????- Sources面板概覽

????-?七種斷點類型

????-?Debug

????-?Devtools Nodejs Debug

????-?Blackbox

????- Workspace：Dvtools as IDE 將更改持久化

????-?Source Map

????- Local Overrides

????-?Snippets 代碼片段

????-?Content Scripts

本文共計：2413字20圖

預計閱讀時間：8min20s

系列文相關

  • 系列文請點擊上方Devtools老師傅養成系列專輯

  • 本文基于 chrome 瀏覽器版本 73.0.3683.103（正式版本）總結

  • 本文目的：關于【devtools 能做什么】建立完善的知識結構，至于怎么做，請查閱官方文檔；工具類知識需要實踐，建議閱讀本文時打開 sample[1]和 devtools 操作一遍

  • 參考 1：google developers 官方文檔[2]

  • 參考 2：來自作者 Jon Kuoerman 在 FrontEndMaster 的 Mastering Chrome Developer Tools v2 課程[3]

  • 參考 3：來自 作者 Tomek Su?kowski 在 medium 的系列文章[4]

  • Devtools腦圖.png[5]

Sources面板概覽

  • Debug : 在源代碼面板中可以設置斷點來調試 JavaScript ，比 console.log()調試更快速高效

  • Devtools as IDE : 通過 Workspaces（工作區）連接本地文件來使用開發者工具的實時編輯器

七種斷點類型

  1. 行斷點：代碼運行到當前行之前暫停執行

  • 在源代碼添加debugger關鍵字

  • 或者點擊Sources面板中的源代碼的行號

  1. 條件行斷點：當滿足條件時才會觸發該斷點

  • 右擊Sources面板中的源代碼的行號

  • 選擇“Add conditional breakpoint”

  1. DOM 斷點:即Elements面板提及過的三種DOM斷點：

  • 節點屬性斷點

  • 節點刪除斷點

  • 子樹變更斷點

  1. XHR/Fetch 斷點

  • 在頁面發出XHR或Fetch請求前加斷點

  1. Event Listener 事件監聽斷點

  • 可以在所有類型的事件函數被出發前加斷點

  1. Exception 異常斷點


????7. Function 函數斷點

  • 把想調試的函數名作為參數，調用debug()函數，可以在每次執行該函數前暫停執行代碼

Debug

  • 函數調用棧 Call Stack：Call Stack 是 time traveling 的，即點擊棧中的任一節點，當前的作用域和局部變量等信息，都會模擬至該節點執行時的狀態

  • 全局作用域 Global ，局部作用域 Local ，閉包作用域 Closure

  • step over next function

  • step into next function

  • step out current function

  • step (與 step over/into 的區別就是，step 會優先嘗試 step into，當沒有可步入的代碼時，就會執行 step over)

  • long resume：恢復執行，并將斷點停用 500ms

  • Continue to here：繼續執行至此行

  • Restart Frame：重新執行函數調用堆棧中的某一幀

  • 行斷點內的多個箭頭：行內斷點（行內的，可 step into 的 執行點


Devtools Nodejs debug

  • node 執行 js 文件，文件名前加--inspect 標志，啟用瀏覽器 nodejs 調試

node調試

  • 點擊 devtools 中，左上角的 devices mode 右側的綠色按鈕，即可啟用 node 服務端中的腳本調試

  • 更多相關[6]

BlackBox

  • BlackBox 的用途：

“BlackBox Script”可以在調試中忽略某些腳本(此處的 BlackBox 為動詞)，在 Call Stack 堆棧中會將該腳本隱藏，單步調試時也不會步入腳本中的任何函數

function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}

例如以上代碼的 A 行，調用的是第三方庫的 doFancyStuff 函數

如果我確認該第三方庫沒有 bug

就可以 BlackBox 整個第三方庫的 js 腳本，在調試中跳過這些代碼的執行

  • 三種添加 BlackBox 的方法：

????1. 在源代碼窗格右鍵，選擇"BlackBox Script"

????2. 在 Call Stack 中右鍵某一幀，選擇"BlackBox Script"

????3. 在設置中的 Blackboxing 面板添加正則表達式匹配文件名

Workspace：Devtools as IDE 將更改持久化

  • 在 sources 左側的面板中選擇Filesystem，點擊Add folder to workspace，將你本地運行的站點的相關源文件添加到 Devtools 的工作區，會自動識別 Page 下和工作區下相對應的文件，在 devtools 更改文件并保存，即持久化保存（目前只支持自動識別，不支持添加映射）

  • 綠標文件：成功的映射到本地的文件，在 Styles 和 Sources 中的文件名前，都會添加綠色圓點作為標識

  • 目前 Devtools 已經支持 sass/scss、UglifyJS、Grunt、Coffescript、Closure 等等，暫時還不支持 webpack，和其他現代的復雜框架，如 react

  • 所有sources面板的文件，都可以右鍵選擇local modifications，查看所有更改

  • 對 DOM 樹的更改不會持久化至 html 文件：因為 dom 的最終表現，受到 html、css、javascript 的共同影響，DOM 樹 !== HTML，因此可以在 sources 中直接更改 html 文件并保存

Source Map

  • 組合/壓縮 css,js 文件是常見的性能優化方案，但是會對開發調試造成困擾

  • Source Map 用于將生產代碼映射至源代碼，Chrome 和 firefox 都內置了對 Source Map 的支持

  • 在 Chorme devtools 中，settings -> preference -> sources 中，選中Enable Javascript source maps和Enable CSS source maps

  • source map 映射信息存在 json 對象中，保存在 .map 文件中，可以由編譯程序添加注釋//# sourceMappingURL=/path/to/script.js.map至生產文件末尾，也可以由服務端在響應頭中添加X-SourceMap: /path/to/script.js.map，將 map 文件與生產文件對應。更多關于 source map 的介紹[7]



Local Overrides

  • 用于覆蓋網絡請求: 在source/page右鍵save for override或直接edit，保存的文件都被存儲到overrides 指定目錄(按照域名建立文件夾). 這種改寫是臨時的

  • 在 Sources 面板左側選擇 Overrides，指定 DevTools 應保存更改的目錄，當在 DevTools 中進行更改時，DevTools 會將修改后的文件的副本保存到所選的本地目錄中，重新加載頁面時，DevTools 提供本地修改的文件，而不是請求的網絡資源。

  • 與 Workspace 相似的，不支持保存對 DOM 樹的更改，需要直接更改 html 源文件。

  • 只能指定一個目錄

  • 斷點debug 時，實時修改文件，然后保存后會恢復到第一個斷點，不用重新刷新

Snippets 代碼片段

  • 在 Sources 面板左側選擇 Snippets，或ctrl shift p輸入 snippet 打開 Snippets 面板，可以創建并保存常用的代碼片段，和用 gist 類似

  • snippets 中，選中代碼并ctrl enter，或點擊右下角的執行按鈕，即可執行代碼片段

代碼片段


Content scripts

  • 這部分腳本是瀏覽器插件的腳本，在特定網頁的上下文中運行。（與插件運行在服務端的腳本，頁面上引用的腳本，頁面上 script 中的內嵌腳本都不同

  • 插件在服務端的腳本可以訪問所有 WebExtension JavaScript API，但它們無法直接訪問網頁內容。

  • Content scripts 只能訪問 WebExtension API 的一小部分，但它們可以使用消息傳遞系統與后臺腳本進行通信，從而間接訪問 WebExtension API。

  • 如果有瀏覽器插件相關的工作，可以更深入研究[8]，不贅述。

參考資料

[1]

sample: https://masteringdevtools.com/

[2]

google developers 官方文檔: https://developers.google.com/web/tools/chrome-devtools/

[3]

Mastering Chrome Developer Tools v2 課程: https://frontendmasters.com/courses/chrome-dev-tools-v2

[4]

系列文章: https://medium.com/@tomsu

[5]

Devtools腦圖.png: https://i.loli.net/2019/04/19/5cb95639a9f73.png

[6]

更多相關: https://nodejs.org/en/docs/guides/debugging-getting-started/

[7]

更多關于 source map 的介紹: https://blog.teamtreehouse.com/introduction-source-maps

[8]

研究插件: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions

- END -

? ?相關文章? ?

????Devtools 老師傅養成[1] - Chrome Devtools介紹

? ? Devtools 老師傅養成[2] - Elements 面板

????Devtools 老師傅養成[3] - Console 面板

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信 ruochuan12 拉你進群。

今日話題

雖然公眾號關注突破一萬了，但閱讀量還是很低。我的目標就是讓公眾號活下來。而活下來的需要解決問題，提供價值。
一個公司沒有收入來源目測不久就倒了。
一個開源項目沒有了收入來源或者其他正反饋也是如此。
同理可得，一個公眾號也是如此。
換種思路，可以這樣理解:
一個公司不能解決問題，提供價值，就很難有收入來源。
一個開源項目不能解決問題，提供價值，就很難有收入來源。
同理可得，一個公眾號也是如此。
歡迎分享、收藏、點贊、在看我的公眾號文章~

一個愿景是幫助5年內前端人走向前列的公眾號

可加我個人微信?ruochuan12，長期交流學習

推薦閱讀

我在阿里招前端，我該怎么幫你（可進模擬面試群）

2年前端經驗，做的項目沒技術含量，怎么辦？

點擊上方卡片關注我、加個星標

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》多篇，在知乎、掘金收獲超百萬閱讀。

從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。

同時，活躍在知乎@若川，掘金@若川。致力于分享前端開發經驗，愿景：幫助5年內前端人走向前列。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/275770.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/275770.shtml
英文地址，請注明出處：http://en.pswp.cn/news/275770.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Spring高級程序設計這本書怎么樣

Spring高級程序設計這本書怎么樣

關于Spring高級程序設計 評論讀后感：這本書需要有一定的spring基礎的人看讀后感：對于了解Spring 很有用，并且是一本不錯的參考書讀后感：這本書早就想買了，就是太貴了～～～ 啦啦啦&…
閱讀更多...
java調用arcgis rest服務器_c#調用arcgis地圖rest服務示例詳解(arcgis地圖輸出)

java調用arcgis rest服務器_c#調用arcgis地圖rest服務示例詳解(arcgis地圖輸出)

using System;using System.Collections.Generic;using System.Linq;using System.Text;using ESRI.ArcGIS.Client;using ESRI.ArcGIS.Client.Geometry;using ESRI.ArcGIS.Client.Tasks;using System.Net;using System.IO;namespace ArcGISDemo{//自定義的Featureclass Feature…
閱讀更多...
Semantic Element

Semantic Element

Semantic Element 1.什么是語義化 根據內容的結構，選擇合適的標簽（代碼語義化）便于開發者閱讀。寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。 語義（semantic）　 語義化標記，是指每種標記表示一…
閱讀更多...
玉伯：開源有帶給我什么

玉伯：開源有帶給我什么

在2021年527螞蟻技術日上，螞蟻內源社區舉辦了內源專場，在專場上玉伯給大家分享了《開源有帶給我什么》，以下為演講的圖文整理。我的開源之路我從2009年到2018年，接近十年時間，一直在做開源的一些事情，在這個…
閱讀更多...
python并行運算庫_最佳并行繪圖Python庫簡介：“ HiPlot”

python并行運算庫_最佳并行繪圖Python庫簡介：“ HiPlot”

python并行運算庫HiPlot is Facebook’s Python library to support visualization of high-dimensional data table, released this January. It is particularly well known for its sophisticated interactive parallel plot.HiPlot是Facebook的Python庫，用于支持…
閱讀更多...
Asp.net 文件上傳的 FileUpload FileName 和 FileUpload PostedFile.FileName的細節問題

Asp.net 文件上傳的 FileUpload FileName 和 FileUpload PostedFile.FileName的細節問題

Asp.net 文件上傳的 FileUpload FileName 和 FileUpload PostedFile.FileName的細節問題 ASP.NET 文件上傳估計大家都用得很熟悉，常用控件 FileUpload 。 主要步驟： 1.判斷是否合法 2.獲得文件的路徑 （包括目錄的完整路徑，同時可能…
閱讀更多...
java 友元_C++ 友元函數 | 菜鳥教程

java 友元_C++ 友元函數 | 菜鳥教程

對教程中的例子，稍加修改，添加了友元類的使用。#include using namespace std;class Box{double width;public:friend void printWidth(Box box);friend class BigBox;void setWidth(double wid);};class BigBox{public :void Print(int width, Box &…
閱讀更多...
剛學編程的程序員必備這5大編程網站，你知道幾個？

剛學編程的程序員必備這5大編程網站，你知道幾個？

一個好的網站，就是程序員學編程的基地。 雖說新手程序員也許知道一些在線編程網站，但是質量上乘的編程網站又知道幾個呢? 下面就來給大家推薦5個質量上乘的編程網站： 0、Leetcode LeetCode是大名鼎鼎的在線刷題網站，通過該網站的…
閱讀更多...
【贈書福利】不扶好眼鏡，請別打開這本挑戰JS語言特性的書

【贈書福利】不扶好眼鏡，請別打開這本挑戰JS語言特性的書

文末贈福利大家好，我是若川。為感謝大家一直以來的支持和肯定，文末抽《JavaScript悟道》3本包郵送和若干紅包，詳細規則請看文末哦。"人們不停地給老化的語言“整容”，拼命地往其中注入各種新的特性來穩住其流行地位&#xff…
閱讀更多...
MySQL存儲過程之事務管理

MySQL存儲過程之事務管理

MySQL存儲過程之事務管理 ACID:Atomic、Consistent、Isolated、Durable 存儲程序提供了一個絕佳的機制來定義、封裝和管理事務。 1，MySQL的事務支持 MySQL的事務支持不是綁定在MySQL服務器本身，而是與存儲引擎相關： Java代碼 MyISAM&#xff…
閱讀更多...
羅馬數字 java_【leetcode刷題】[簡單]13.羅馬數字轉整數(roman to integer)-java

羅馬數字 java_【leetcode刷題】[簡單]13.羅馬數字轉整數(roman to integer)-java

羅馬數字轉整數 roman to integer題目羅馬數字包含以下七種字符: I， V， X， L，C，D 和 M。字符 數值I 1V 5X 10L 50C 100D 500M 1000例如， 羅馬數字 2 寫做 II ，即為兩個并列的 1。12 寫做 XII &a…
閱讀更多...
我在工作中是如何使用Git的

我在工作中是如何使用Git的

大家好，我是若川。今天分享一篇關于git的好文章。我自己經常用命令行終端和git縮寫。具體可以看我以往的文章。使用 ohmyzsh 打造 windows、ubuntu、mac 系統高效終端命令行工具，用過都說好。點擊下方卡片關注我、加個星標學習源碼整體架構系列、年度總結…
閱讀更多...
克服浮躁_設計思維：您克服并贏得低迷的最終工具。

克服浮躁_設計思維：您克服并贏得低迷的最終工具。

克服浮躁設計思維101 (Design thinking 101) Let’s begin by getting ourselves clear on the question: What is design thinking?讓我們首先弄清楚問題：設計思想是什么？ Many people have an impression that design thinking has something to do …
閱讀更多...
mongodb數組字段prefix匹配返回

mongodb數組字段prefix匹配返回

DOC: https://docs.mongodb.com/manu... collection（test）結構 {_id: Objectd("123456789"),category: [apple_1,apple_2,banana_1,banana_2] }Question: 對test表的所有數據做category過濾，返回category中以apple開頭的元素 表原數…
閱讀更多...
java參數化查詢_小博老師解析Java核心技術 ——JDBC參數化查詢（二）

java參數化查詢_小博老師解析Java核心技術 ——JDBC參數化查詢（二）

[步驟閱讀四]SQL注入按照以上方式開發，確實已經完成了基本的用戶登錄業務需求，但是這么做的話可以會出現一個比較嚴重的問題，那就是容易被SQL注入。所謂SQL注入，就是在需要用戶填寫信息，并且這些信息會生成數據庫查詢字…
閱讀更多...
Lightbox 效果

Lightbox 效果

網上其實到處都是。 遮罩層： .transparent {filter:alpha(opacity0); -moz-opacity: 0.0; opacity: 0.0; z-index: 90;background-color:#000;float:left;top:0;left:0;position:absolute;width:100%; }主要業務層：.rollover5 {display:none; position:a…
閱讀更多...
前端搶飯碗系列之Vue項目如何做單元測試

前端搶飯碗系列之Vue項目如何做單元測試

大家好，我是若川。今天分享一篇vue項目如何做單元測試的好文，文章比較長，建議先收藏，需要時用電腦看。點擊下方卡片關注我、加個星標學習源碼系列、年度總結、JS基礎系列關于單元測試，最常見的問題應該就是“前端單元測…
閱讀更多...
React Native組件開發指南

React Native組件開發指南

React Native的組件開發一直處在一個比較尷尬的處境。在官方未給予相關示例與腳手架的情況下，社區中依然誕生了許許多多的React Native組件。因為缺少示例與規范，很多組件庫僅含有一個index.js文件。這種基礎的目錄結構也導致了一些顯而易見的問題&#…
閱讀更多...
java activiti jbpm_activiti和jbpm工作流引擎哪個比較好？

java activiti jbpm_activiti和jbpm工作流引擎哪個比較好？

原標題：activiti和jbpm工作流引擎哪個比較好？在常用的ERP系統、OA系統的開發中，工作流引擎是一個必不可少的工具。之前在選擇工作流引擎時曾經在activiti和jbpm之間有過比較，當時做出的決定是使用jbpm，但實際開發過程中…
閱讀更多...
C/C++中善用大括號

C/C++中善用大括號

C/C中善用大括號轉載于:https://www.cnblogs.com/satng/archive/2010/12/17/2138840.html
閱讀更多...
最新文章

Copyright @ 2022~2023