摘要:系列文章的人懶事多,最近翻多寫少啊。不過當我們調試我們自己的腳本的時候也會一不小心跳到這些文件中,引發額外的調試任務。
‘debugger;’系列文章的Github Repo
人懶事多,最近翻多寫少啊。原文地址這里
除了console.log,debugger就是另一個我很喜歡的快速調試的工具,將debugger加入代碼之后,Chrome會自動在插入它的地方停止,很像C或者Java里面打斷點。你也可以在一些條件控制中插入該調試語句,譬如:
if (thisThing) { debugger; }將Objects以表格形式展示
有時候我們需要看一些復雜的對象的詳細信息,最簡單的方法就是用console.log然后展示成一個列表狀,上下滾動進行瀏覽。不過似乎用console.table展示成列表會更好呦,大概是介個樣子:
var animals = [ { animal: "Horse", name: "Henry", age: 43 }, { animal: "Dog", name: "Fred", age: 13 }, { animal: "Cat", name: "Frodo", age: 18 } ]; console.table(animals);多屏幕尺寸測試
Chrome有一個非常誘人的功能就是能夠模擬不同設備的尺寸,在Chrome的Inspector中點擊toggle device mode按鈕,然后就可以在不同的設備屏幕尺寸下進行調試咯:
在Console快速選定DOM元素在Elements選擇面板中選擇某個DOM元素然后在Console中使用該元素也是非常常見的一個操作,Chrome Inspector會緩存最后5個DOM元素在它的歷史記錄中,你可以用類似于Shell中的$0等方式來快速關聯到元素。譬如下圖的列表中有‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’這幾個元素,你可以這么使用:
獲取某個函數的調用追蹤記錄JavaScript框架極大方便了我們的開發,但是也會帶來大量的預定義的函數,譬如創建View的、綁定事件的等等,這樣我們就不容易追蹤我們自定義函數的調用過程了。雖然JavaScript不是一個非常嚴謹的語言,有時候很難搞清楚到底發生了啥,特別是當你需要審閱其他人的代碼的時候。這時候console.trace就要起作用咯,它可以幫你進行函數調用的追蹤。譬如下面的代碼中我們要追蹤出car對象中對于funcZ的調用過程:
var car; var func1 = function() { func2(); } var func2 = function() { func4(); } var func3 = function() { } var func4 = function() { car = new Car(); car.funcX(); } var Car = function() { this.brand = ‘volvo’; this.color = ‘red’; this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } this.funcZ = function() { console.trace(‘trace car’) } } func1();
這邊就可以清晰地看出func1調用了func2,然后調用了func4,func4創建了Car的實例然后調用了car.funcX。
格式化被壓縮的代碼有時候在生產環境下我們發現了一些莫名奇妙的問題,然后忘了把sourcemaps放到這臺服務器上,或者在看別人家的網站的源代碼的時候,結果就看到了一坨不知道講什么的代碼,就像下圖。Chrome為我們提供了一個很人性化的反壓縮工具來增強代碼的可讀性,大概這么用:
快速定位調試函數當我們想在函數里加個斷點的時候,一般會選擇這么做:
在Inspector中找到指定行,然后添加一個斷點
在腳本中添加一個debugger調用
不過這兩種方法都存在一個小問題就是都要到對應的腳本文件中然后再找到對應的行,這樣會比較麻煩。這邊介紹一個相對快捷點的方法,就是在console中使用debug(funcName)然后腳本會在指定到對應函數的地方自動停止。這種方法有個缺陷就是無法在私有函數或者匿名函數處停止,所以還是要因時而異:
var func1 = function() { func2(); }; var Car = function() { this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } } var car = new Car();禁止不相關的腳本運行
當我們開發現代網頁的時候都會用一些第三方的框架或者庫,它們幾乎都是經過測試并且相對而言Bug較少的。不過當我們調試我們自己的腳本的時候也會一不小心跳到這些文件中,引發額外的調試任務。解決方案呢就是禁止這部分不需要調試的腳本運行,詳情可見這篇文章:: javascript-debugging-with-black-box。
在較復雜的調試情況下發現關鍵元素在一些復雜的調試環境下我們可能要輸出很多行的內容,這時候我們習慣性的會用console.log, console.debug, console.warn, console.info, console.error這些來進行區分,然后就可以在Inspector中進行過濾。不過有時候我們還是希望能夠自定義顯示樣式,你可以用CSS來定義個性化的信息樣式:
console.todo = function(msg) { console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘); } console.important = function(msg) { console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘); } console.todo(“This is something that’ s need to be fixed”); console.important(‘This is an important message’);
在console.log()中你可以使用%s來代表一個字符串 , %i 來代表數字, 以及 %c 來代表自定義的樣式。
監測指定函數的調用與參數在Chrome中可以監測指定函數的調用情況以及參數:
var func1 = function(x, y, z) { };
這種方式能夠讓你實時監控到底啥參數被傳入到了指定函數中。
Console中使用$進行元素查詢在Console中也可以使用$來進行類似于querySelector那樣基于CSS選擇器的查詢,$(‘css-selector’) 會返回滿足匹配的第一個元素,而$$(‘css-selector’) 會返回全部匹配元素。注意,如果你會多次使用到元素,那么別忘了將它們存入變量中。
Postman很多人習慣用Postman進行API調試或者發起Ajax請求,不過別忘了你瀏覽器自帶的也能做這個,并且你也不需要擔心啥認證啊這些,因為Cookie都是自帶幫你傳送的,這些只要在network這個tab里就能進行,大概這樣子:
DOM變化檢測DOM有時候還是很操蛋的,有時候壓根不知道啥時候就變了,不過Chrome提供了一個小的功能就是當DOM發生變化的時候它會提醒你,你可以監測屬性變化等等:
Further ReadingSpeed up your markup with zen coding emmet
Emmet and css the forgotten part
Chrome command line api
Chrome developer tools tips and tricks
Firefox edit and resend a request
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79615.html
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
摘要:在前端開發中,調試技術是必不可少的技能,本文將介紹五種前端開發必備的調試技術。移動調試斷點斷點方法遠程映射本地調試在移動上面開發調試是很復雜的,所以就有了。 在前端開發中,調試技術是必不可少的技能,本文將介紹五種前端開發必備的調試技術。 Weinre移動調試 DOM 斷點 debugger斷點 native方法hook 遠程映射本地調試 Weinre 在移動上面開...
摘要:但當時想著就是簡單的校驗,沒必要引插件,就自己寫一個簡單的函數。隨著校驗的需求多樣化,函數越來越大。提供了常用的校驗規則,需要的可以擴展。 有意取而不得,失落而歸。無意間有所獲,未有喜悅,但珍惜依舊 1.前言 表單校驗,相信絕大部分的開發者會遇到過,網上也有很多插件可使用。但當時想著就是簡單的校驗,沒必要引插件,就自己寫一個簡單的函數。隨著校驗的需求多樣化,函數越來越大。有點輪子的雛形...
摘要:但當時想著就是簡單的校驗,沒必要引插件,就自己寫一個簡單的函數。隨著校驗的需求多樣化,函數越來越大。提供了常用的校驗規則,需要的可以擴展。 有意取而不得,失落而歸。無意間有所獲,未有喜悅,但珍惜依舊 1.前言 表單校驗,相信絕大部分的開發者會遇到過,網上也有很多插件可使用。但當時想著就是簡單的校驗,沒必要引插件,就自己寫一個簡單的函數。隨著校驗的需求多樣化,函數越來越大。有點輪子的雛形...
摘要:但當時想著就是簡單的校驗,沒必要引插件,就自己寫一個簡單的函數。隨著校驗的需求多樣化,函數越來越大。提供了常用的校驗規則,需要的可以擴展。 有意取而不得,失落而歸。無意間有所獲,未有喜悅,但珍惜依舊 1.前言 表單校驗,相信絕大部分的開發者會遇到過,網上也有很多插件可使用。但當時想著就是簡單的校驗,沒必要引插件,就自己寫一個簡單的函數。隨著校驗的需求多樣化,函數越來越大。有點輪子的雛形...
閱讀 2309·2021-08-26 14:14
閱讀 2678·2019-08-29 13:07
閱讀 2084·2019-08-26 11:44
閱讀 676·2019-08-26 10:11
閱讀 2410·2019-08-23 15:43
閱讀 3079·2019-08-23 14:17
閱讀 385·2019-08-23 12:36
閱讀 2082·2019-08-22 15:20