者按: 手把手教你擺脫console.log
,掌握高級的debug方法。
原文: Learn How To Debug JavaScript with Chrome DevTools
譯者: Fundebug
為了保證可讀性,本文采用意譯而非直譯。另外,本文版權(quán)歸原作者所有,翻譯僅用于學習。
作為一個剛?cè)腴T的開發(fā)者,找到BUG的根源并修復(fù)通常要花費不少功夫。往往會嘗試在代碼中隨機用console.log
打印變量值來尋找問題。
這篇文章教會你正確的Debug姿勢。你將會學會使用谷歌開發(fā)者工具(Chrome Developer Tools)來設(shè)置斷點并單步執(zhí)行代碼。相比于打印日志,這樣會高效得多。
本文針對一種特定類型的問題來演示如何使用谷歌開發(fā)者工具Debug,該方法同樣適用于其它通用問題。
第一步:復(fù)現(xiàn)BUG
Debugging的第一步往往是復(fù)現(xiàn)bug。“復(fù)現(xiàn)BUG”是指找到一個行為序列可以100%觸發(fā)bug。你需要復(fù)現(xiàn)bug很多遍,因此,盡量消除不必要的步驟。
參照下面的流程來復(fù)現(xiàn)這篇文章將要修復(fù)的一個bug:
這里有一個我們要使用到的網(wǎng)頁。在新的標簽打開它:打開Demo
在Number 1
的輸入框輸入5
在Number 2
的輸入框輸入1
點擊Add Number 1 and Number 2
按鈕
在下方會輸出5 + 1=51
應(yīng)該輸出為6
, 而不是51
。
Fundebug的JavaScript錯誤監(jiān)控插件能夠捕獲各種前端BUG,并且記錄用戶行為,可以幫助你及時發(fā)現(xiàn)和復(fù)現(xiàn)BUG。
第二步:使用斷點來暫停代碼執(zhí)行
谷歌開發(fā)者工具可以讓你終端代碼執(zhí)行,并查看此時所有的變量值。用來中斷執(zhí)行的工具叫做breakpoint
。如下操作:
回到Demo頁面,打開開發(fā)者工具(Mac: Command + Option + I, Window, Linux: Control + Shift + I)。
點擊Source
標簽
點擊Event Listener Breakpoints
,將里面的內(nèi)容展開。開發(fā)者工具會展開一列,其中包含Animation
,Clipboard
將鼠標移到Mouse
前面, 點擊三角展開里面的內(nèi)容
選中click
回到demo,點擊Add Number 1 and Number 2
。開發(fā)者工具會將Demo的執(zhí)行暫停,并且在Source
部分高亮如下代碼:
function onClick() { |
為什么?
當你在Event Listener Breakpoints
選擇了Mouse click
, 那么所有的點擊事件都會被設(shè)置斷點。因此,任何一個節(jié)點被點擊,并且該節(jié)點有定義點擊事件,那么開發(fā)者工具(DevTools)會自動在該點擊事件Handler的第一行處暫停。
第三步:單步執(zhí)行調(diào)試代碼
一個常見的bug是:腳本的執(zhí)行順序錯誤。單步調(diào)試讓你一步一步跟著代碼的執(zhí)行邏輯走,一次移動一行代碼,那么你就會清楚代碼是按照哪個的順序執(zhí)行的。我們來試一下:
在開發(fā)者工具的Source
面板,點擊第三個(Step into next function call),
Step into next function call
該按鈕引導(dǎo)你單步執(zhí)行定義的點擊事件,一次一行。點擊后,第15行代碼高亮:
現(xiàn)在點擊第二個(Step over next function call)按鈕
Step over next function call
該按鈕會跳過當前要執(zhí)行的函數(shù)inutsAreEmpty
,而不是進入該函數(shù)。同時直接跳到第19行,因為當前輸入框不為空。
這就是單步調(diào)試代碼的基本思路。如果你仔細閱讀get-started.js
,會發(fā)現(xiàn)bug可能就隱藏在updateLabel
函數(shù)的某個地方。除了使用單步調(diào)試以外,你還可以使用另一種斷點。
第四步:設(shè)置另一個斷點
如果你想在某一行設(shè)置斷點,可以使用行斷點(line-of-code breakpoint
)。
找到updateLabel
函數(shù)的最后一行,
label.textContent=addend1 + ' + ' + addend2 + '=' + sum; |
在代碼的左邊,你可以看到顯示的行號32。點擊32,開發(fā)者工具會在行號出顯示一個藍色的標記。該標記表示行斷點設(shè)置成功。代碼總會在執(zhí)行到這一行的時候中斷。
點擊第一個Resume script execution
按鈕
Resume script execution button
代碼會持續(xù)執(zhí)行到第32行。
在左側(cè),Local
部分已經(jīng)將addend1
,addend2
和sum
的值都顯示出來了。
你就會發(fā)現(xiàn)它們都是字符串,字符串相加就是將它們拼接起來,然而我們想要的是數(shù)字求和。
第五步:檢查變量值
另一個常見的情況就是變量或則函數(shù)的返回值和期望值不一樣。很多開發(fā)者都使用console.log
來查看值的變化,但是使用console.log
很麻煩而且非常低效。首先,你需要手動添加很多console.log
,其次,在你還不清楚哪個變量會引發(fā)bug之前,你需要把很多變量值打印出來。
谷歌開發(fā)者工具一個很好的功能就是觀察表達式(Watch Expressions),可以一直監(jiān)控變量值的變化。觀察表達式不僅可以用于觀察變量值,你可以用來監(jiān)控任意表達式。我們來試一試:
在開發(fā)者面板下的Source
面板,點擊Watch
,展開里面的內(nèi)容(初次展開為空)。
點擊右側(cè)的+號(Add Expression
)
Add Expression button
輸入typeof sum
敲擊回車鍵。開發(fā)者面板會顯示typeof sum: "string"
。
正如我們推測:sum的類型是字符串。
console.log
的另一個替代品是直接使用Console
。我么可以使用Console
來執(zhí)行任意的JavaScript表達式。開發(fā)者通常使用Console
來重寫變量值來debug。我們可以使用Console
來驗證可能的解決方案。
如果Console
沒有顯示出來,敲擊ESC
鍵來打開。它會在開發(fā)者面板的最下方打開。
在Console
中輸入parseInt(addend1) + parseInt(addend2)
敲擊回車鍵,輸出6。
第六步:修復(fù)BUG
我們已經(jīng)找到了潛在的修復(fù)方案,無需離開開發(fā)者面板,我們可以直接在開發(fā)者面板編輯源代碼。
在開發(fā)者工具的Source
面板,將源代碼中var sum=addend1 + addend2
替換為var sum=parseInt(addend1) + parseInt(addend2);
。
保存改動(Mac: Command + S, Window, Linux: Control + S)。
點擊第五個Deactivate breakpoints
按鈕
Deactivate breakpoints button
該按鈕取消所有設(shè)置的斷點。
點擊第一個Resume script execution
按鈕
Resume script execution button
輸入不同的值試一試,看看是否可以正常執(zhí)行。
本文脫胎于Kayce Basques的一篇文章Get Started with Debugging JavaScript in Chrome DevTools。
原文作者:fundebug
dea 至于介紹就看官網(wǎng)就ok了,https://www.jetbrains.com/idea/download/other.html
Debug主要對應(yīng)的是橫向的一條和縱向的一條:
1、首先說第一組按鈕,共8個按鈕,從左到右依次如下:
斷點的右鍵:
查看斷點處的某個對象的值,可以:alter + click,按住alter,然后點擊想看的變量
計算表達式有兩個作用:
設(shè)置表達式的值:
在變量右鍵,set Value的值進行設(shè)置值。
方法斷點是三角形的斷點,主要的作用是,點擊F9,
哪里有異常,斷點就會停留在哪兒,比如下面的空指針異常,程序會停留在報空指針異常的代碼行中!
程序停止在拋出異常的那一行(使用這種方法尋找出現(xiàn)空指針的代碼位置是非常容易的!)
在設(shè)置復(fù)雜值的時候會看到,該值是如何變化的,就可以設(shè)置字段斷點,在寫的過程會停頓!!
在每次改變值的時候就會用到字段斷點
第一次設(shè)置的age的值是10
第二次設(shè)置的值為:20
debug的時候,i=50就直接進行停頓
希望在調(diào)試的時候能加載到變化的代碼:
avaScript 是網(wǎng)景(Netscape)公司開發(fā)的一種基于客戶端瀏覽器、面向(基于)對象、事件驅(qū)動式的網(wǎng)頁腳本語言。JavaScript語言的前身叫作Livescript。
文本編輯器
Web瀏覽器
解釋執(zhí)行(由上而下)
JavaScript1.0——JavaScript1.4
JavaScript/IE3.0、JavaScript1.2/IE4.0;
微軟允許用戶自行設(shè)置對JavaScript處理模式。
JavaScript與Java的區(qū)別體現(xiàn)在:
首先,它們是兩個公司開發(fā)的不同的兩個產(chǎn)品,Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計語言,特別適合于Internet應(yīng)用程序開發(fā);而JavaScript是Netscape公司的產(chǎn)品,其目的是為了擴展Netscape Navigator功能而開發(fā)的一種可以嵌入Web頁面中的基于對象和事件驅(qū)動的解釋性語言。
其次,JavaScript是基于對象的,而Java是面向?qū)ο蟮模碕ava是一種真正的面向?qū)ο蟮恼Z言,即使是開發(fā)簡單的程序,必須設(shè)計對象。JavaScript是種腳本語言,它可以用來制作與網(wǎng)絡(luò)無關(guān)的,與用戶交互作用的復(fù)雜軟件。它是一種基于對象和事件驅(qū)動的編程語言。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計人員使用。
第三,兩種語言在其瀏覽器中所執(zhí)行的方式不一樣。Java的源代碼在傳遞到客戶端執(zhí)行之前,必須經(jīng)過編譯,因而客戶端上必須具有相應(yīng)平臺上的仿真器或解釋器,它可以通過編譯器或解釋器實現(xiàn)獨立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言,其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯,而是將文本格式的字符代碼發(fā)送給客戶,由瀏覽器解釋執(zhí)行。
第四,兩種語言所采取的變量是不一樣的。Java采用強類型變量檢查,即所有變量在編譯之前必須作聲明。JavaScript中變量聲明,采用其弱類型。即變量在使用前不需作聲明,而是解釋器在運行時檢查其數(shù)據(jù)類型。
第五,代碼格式不一樣。Java是一種與HTML無關(guān)的格式,必須通過像HTML中引用外媒體那么進行裝載,其代碼以字節(jié)代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式,可以直接嵌入HTML文檔中,并且可動態(tài)裝載。編寫HTML文檔就像編輯文本文件一樣方便。
第六,嵌入方式不一樣。在HTML文檔中,兩種編程語言的標識不同,JavaScript使用<script>...</script>來標識,而Java使用<applet> ... </applet> 來標識。
第七,靜態(tài)綁定和動態(tài)綁定。Java采用靜態(tài)聯(lián)編,即Java的對象引用必須在編譯時的進行,以使編譯器能夠?qū)崿F(xiàn)強類型檢查,如不經(jīng)編譯則就無法實現(xiàn)對象引用的檢查。JavaScript采用動態(tài)聯(lián)編,即JavaScript的對象引用在運行時進行檢查。
如果想要更高效、更系統(tǒng)地學會javascript,最好采用邊學邊練的學習模式。
今天分享的這套JavaScript學習教程,講解了前端開發(fā)中的核心技術(shù)JavaScript,俗稱JS
內(nèi)容涵蓋:JavaScript核心語法、JavaScript內(nèi)置支持類、JavaScript調(diào)試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點,該視頻可以開啟你的WEB前端之路。
1. .JavaScript教程-JavaScript概述
2. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式1
3. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式2
4. .JavaScript教程-HTML嵌入JavaScript代碼的第二種方式
5. .JavaScript教程-HTML嵌入JavaScript代碼的第三種方式
6. JavaScript教程-JS的標識符
7. .JavaScript教程-JS的變量1
8. .JavaScript教程-JS的變量2
9. JavaScript教程-JS的函數(shù)初步1
10. .JavaScript教程-JS的函數(shù)初步2
11. .JavaScript教程-全局變量和局部變量
12. .JavaScript教程-JS的數(shù)據(jù)類型
13. .JavaScript教程-Undefined數(shù)據(jù)類型
14. .JavaScript教程-Number數(shù)據(jù)類型
15. .JavaScript教程-Boolean數(shù)據(jù)類型
16. .JavaScript教程-回顧數(shù)據(jù)類型
17. .JavaScript教程-String數(shù)據(jù)類型
18. .JavaScript教程-Object數(shù)據(jù)類型
19. JavaScript教程-Object數(shù)據(jù)類型2
20. .JavaScript教程-Object數(shù)據(jù)類型3
21. .JavaScript教程-null undefined NaN的區(qū)別以及等同和全等運算符
22. .JavaScript教程-JS的常用事件
23. .JavaScript教程-回調(diào)函數(shù)的概念
24. .JavaScript教程-注冊事件的兩種方式
25. JavaScript教程-JS代碼的執(zhí)行順序
26. .JavaScript教程-JS代碼的執(zhí)行順序2
27. JavaScript教程-捕捉回車鍵
28. .JavaScript教程-捕捉回車鍵2
29. .JavaScript教程-void運算符
30. .JavaScript教程-JS的控制語句
31. JavaScript教程-設(shè)置和獲取文本框的value
32. JavaScript教程-innerHTML和innerText屬性
33. .JavaScript教程-正則表達式
34. .JavaScript教程-郵箱地址的正則表達式
35. JavaScript教程-擴展字符串的trim函數(shù)
36. .JavaScript教程-回顧JS
37. JavaScript教程-表單驗證
38. JavaScript教程-表單驗證2
39. JavaScript教程-表單驗證3
40. .JavaScript教程-表單驗證4
41. .JavaScript教程-復(fù)選框的全選和取消全選
42. .JavaScript教程-獲取下拉列表選中項的value
43. .JavaScript教程-周期函數(shù)setInterval
44. .JavaScript教程-內(nèi)置支持類Array
45. .JavaScript教程-BOM編程window的open和close
46. .JavaScript教程-BOM編程彈出確認框
47. .JavaScript教程-(補錄)-將當前窗口設(shè)置為頂級窗口
48. .JavaScript教程-BOM編程history和location對象
49. .JavaScript教程-JSON在開發(fā)中的使用
50. .JavaScript教程-JSON在開發(fā)中的使用2
51. JavaScript教程-JSON在開發(fā)中的使用3
52. .JavaScript教程-JSON在開發(fā)中的使用4
53. JavaScript教程-JSON在開發(fā)中的使用5
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。