整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          Chrome開發(fā)者工具Debug入門

          Chrome開發(fā)者工具Debug入門

          者按: 手把手教你擺脫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ā)者工具會展開一列,其中包含AnimationClipboard

          • 將鼠標移到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)將addend1addend2sum的值都顯示出來了。

            你就會發(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個按鈕,從左到右依次如下:



          • Show Execution Point (Alt + F10):如果光標在其它行或其它頁面,點擊這個按鈕可跳轉(zhuǎn)到當前代碼執(zhí)行的行。
          • Step Over (F8):步過,一行一行地往下走,如果這一行上有方法不會進入方法。
          • Step Into (F7):步入,如果當前行有方法,可以進入方法內(nèi)部,一般用于進入自定義方法內(nèi),不會進入官方類庫的方法。
          • Step Out (Shift + F8):步出,從步入的方法內(nèi)退出到方法調(diào)用處,此時方法已執(zhí)行完畢,但還沒有完成賦值。
          • Drop Frame (默認無):回退斷點,第八節(jié)詳細說明
          • Run to Cursor (Alt + F9):運行到光標處,你可以將光標定位到你需要查看的那一行,然后使用這個功能,代碼會運行至光標行,而不需要打斷點。

          斷點的右鍵:

          • enable:該斷點是否是斷點
          • Suspend:多線程斷點
          • Condition:條件斷點

          查看斷點處的某個對象的值,可以:alter + click,按住alter,然后點擊想看的變量

          二、計算表達式

          計算表達式有兩個作用:

          • 查看表達式的值
          • 設(shè)置表達式的值

          設(shè)置表達式的值:

          • 方法一:該案例是設(shè)置表達式的值a=20;


          • 方法二:

          在變量右鍵,set Value的值進行設(shè)置值。


          三、方法斷點

          方法斷點是三角形的斷點,主要的作用是,點擊F9,

          • 進入到方法中第一行和最后的一行

          • 在接口上打斷點,當一個接口有多個實現(xiàn)類,在接口的方法上打斷點,可以快速的定位到具體的實現(xiàn)類上

          四、異常斷點

          哪里有異常,斷點就會停留在哪兒,比如下面的空指針異常,程序會停留在報空指針異常的代碼行中!

          程序停止在拋出異常的那一行(使用這種方法尋找出現(xiàn)空指針的代碼位置是非常容易的!

          五、字段斷點

          在設(shè)置復(fù)雜值的時候會看到,該值是如何變化的,就可以設(shè)置字段斷點,在寫的過程會停頓!!

          在每次改變值的時候就會用到字段斷點

          第一次設(shè)置的age的值是10


          第二次設(shè)置的值為:20

          六、條件斷點

          debug的時候,i=50就直接進行停頓

          七:調(diào)試的時候加載變化的代碼

          希望在調(diào)試的時候能加載到變化的代碼:

          avaScript 是網(wǎng)景(Netscape)公司開發(fā)的一種基于客戶端瀏覽器、面向(基于)對象、事件驅(qū)動式的網(wǎng)頁腳本語言。JavaScript語言的前身叫作Livescript。

          JavaScript的特點:

          • 簡單、易學、易用;
          • 跨平臺;IE、Navigator
          • 符合ECMA(歐洲計算機制造協(xié)會)標準,可移植;
          • 事件驅(qū)動式的腳本程序設(shè)計思想;
          • 動態(tài)、交互式的操作方式。

          JavaScript的作用:

          • 交互式操作;
          • 表單驗證;
          • 網(wǎng)頁特效;
          • Web游戲
          • 服務(wù)器腳本開發(fā)等。

          JavaScript的編寫環(huán)境:

          文本編輯器

          JavaScript的執(zhí)行平臺:

          Web瀏覽器

          JavaScript的執(zhí)行方式:

          解釋執(zhí)行(由上而下)

          JavaScript的版本:

          JavaScript1.0——JavaScript1.4

          瀏覽器對JavaScript的支持:

          JavaScript/IE3.0、JavaScript1.2/IE4.0;

          微軟允許用戶自行設(shè)置對JavaScript處理模式。

          JavaScript與Java、VBScript、JScript的關(guān)系:

          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的對象引用在運行時進行檢查。

          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

          更多Java學習資料,獲取方式:

          關(guān)注+轉(zhuǎn)發(fā)本文后私信扣“1”


          主站蜘蛛池模板: 一区二区和激情视频| 中文字幕一区二区三区久久网站 | 精品一区二区三区四区在线| 国产成人av一区二区三区不卡 | 一区二区精品久久| 久久无码精品一区二区三区| 国产大秀视频在线一区二区 | 国产一区二区三区免费在线观看| 一区 二区 三区 中文字幕| 精品一区二区久久久久久久网精| 无码少妇一区二区性色AV | 亚洲一区免费观看| 亚洲国产精品一区二区成人片国内| 色婷婷香蕉在线一区二区| 久久中文字幕无码一区二区| 国产伦精品一区二区免费| 亚洲色一区二区三区四区| tom影院亚洲国产一区二区| 久久一区二区精品| A国产一区二区免费入口| 亚洲韩国精品无码一区二区三区| 夜色福利一区二区三区| 国产一区在线观看免费| 加勒比精品久久一区二区三区| 国产另类ts人妖一区二区三区| 精品无码成人片一区二区98| 视频一区二区三区人妻系列| 熟妇人妻AV无码一区二区三区| 成人免费视频一区| 无码视频一区二区三区在线观看 | 无码精品人妻一区二区三区人妻斩| 国产嫖妓一区二区三区无码| 白丝爆浆18禁一区二区三区| 亚洲一区二区成人| 日韩av片无码一区二区三区不卡 | 日本韩国黄色一区二区三区 | 在线精品亚洲一区二区三区| 奇米精品一区二区三区在| 国产精品视频一区二区猎奇| 波多野结衣中文字幕一区| 亚洲一区综合在线播放|