<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          js調試,14個你可能不知道的JavaScript調試技巧

          時間:?2017-11-06閱讀:?2582標簽:?調試

          以更快的速度和更高的效率來調試JavaScript

          熟悉工具可以讓工具在工作中發揮出更大的作用。盡管江湖傳言 JavaScript 很難調試,但如果你掌握了幾個技巧,就能用很少的時間來解決錯誤和bug.

          文中已經列出了14個你可能不知道的調試技巧,但是可能需要你牢記在心,以便在下次需要調試JavaScript代碼時使用!

          一起來看

          大多數技巧都適用于Chrome控制臺和Firefox, 盡管還有很多其他的調試工具,但大部分也適用。


          1. debugger

          除了console.log, debugger是我們最喜歡、快速且骯臟的調試工具。執行代碼后,Chrome會在執行時自動停止。你甚至可以把它封裝成條件,只在需要時才運行。

          if (thisThing) {
              debugger;
          }


          2. 用表格顯示對象

          有時, 有一組復雜的對象要查看。可以通過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);
          

          輸出:


          3. 使用不同屏幕尺寸

          在桌面上安裝不同移動設備模擬器非常棒,但現實確是不可行的。如何調整窗口大小呢?Chrome提供了所需的一切。跳到控制臺并點擊‘切換設備模式’按鈕。觀察窗口變化即可!


          4. 如何快速找到DOM元素

          在Elements面板中標記一個DOM元素,并在控制臺中使用它。Chrome控制臺會保留選擇歷史的最后五個元素,最終選擇的首個元素被標記為$0,第二個選擇的元素為$1,依此類推。

          如果您按照“item-4”,“item-3”,“item-2”,“item-1”,“item-0”的順序選擇以下標簽,則可以在控制臺中訪問DOM節點:


          5. 使用 console.time() 和 console.timeEnd() 測試循環

          要得知某些代碼的執行時間,特別是調試緩慢循環時,非常有用。 甚至可以通過給方法傳入不同參數,來設置多個定時器。來看看它是怎么運行的:

          console.time('Timer1');
          
          var items = [];
          
          for(var i = 0; i < 100000; i++){
             items.push({index: i});
          }
          
          console.timeEnd('Timer1');
          

          運行產生了一下結果:


          6. 獲取函數的堆棧跟蹤信息

          使用JavaScript框架,會引入大量代碼。

          創建視圖并觸發事件,最后你想了解函數調用的過程。

          由于JavaScript不是一個很結構化的語言, 有時候很難知道什么時候發生了什么。使用console.trace (僅僅只是在控制臺中跟蹤) 可以方便地調試JavaScript.

          想象一下,要查看第24行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();
          

          24行將輸出:

          可以看到 func1 調用 func2, func2 調用 func4。 Func4 創建了一個 Car 的實例,然后調用函數 car.funcX,依此類推。

          即使你認為自己的代碼寫的非常好,這依然很有用。假如你想改進自己的代碼。獲取跟蹤信息和所有涉及的函數,每一項都可以點擊,可以在他們之間來回切換。就像是給你提供了一個調用堆棧的選擇列表。


          7. 將代碼格式化后再調試JavaScript

          有時代碼會在生產環境出問題,但是你的source maps沒有部署在生產環境上。不要怕。Chrome可以將您的JavaScript文件格式化。格式化后的代碼雖然不像真實代碼那樣有用,但至少可以看到發生了什么。點擊 Chrome控制臺中的源代碼查看器中的{}按鈕即可。


          8. 快速查找要調試的函數

          假設你要在函數中打斷點,最常用的兩種方式是:

          1. 在控制臺查找行并添加斷點
          2. 在代碼中添加debugger

          在這兩個解決方案中,您必須在文件中單擊以調試特定行。

          使用控制臺打斷點可能不太常見。在控制臺中使用debug(funcName),當到達傳入的函數時,代碼將停止。

          這個調試方法很快, 但缺點是不適用于私有或匿名函數。但除了私有和匿名函數, 這可能是找到調試函數的最快方法。(注意:這個函數和console.debug函數不是同一個東西。)

          var func1 = function() {
            func2();
          };
          
          var Car = function() {
            this.funcX = function() {
              this.funcY();
            }
          
            this.funcY = function() {
              this.funcZ();
            }
          }
          
          var car = new Car();
          

          在控制臺中輸入debug(car.funcY),當調用car.funcY時,將以調試模式停止:


          9. 屏蔽不相關代碼

          現在,我們經常在應用中引入幾個庫或框架。其中大多數都經過良好的測試且相對沒有缺陷。 但是,調試器仍然會進入與調試任務無關的文件。解決方案是屏蔽不需要調試的腳本。當然可以包括你自己的腳本。


          10. 在復雜的調試過程中尋找重點

          在更復雜的調試中,我們有時希望輸出很多行。可以做的就是保持良好輸出結構,使用更多控制臺函數,例如, console.log, console.debug, console.warn, console.info, console.error等等。然后,可以在控制臺中快速瀏覽。但有時候,某些JavaScrip調試信息并不是你需要的。現在,可以自己美化調試信息了。在調試JavaScript時,可以使用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設置自定義樣式等等,還有很多更好的console.log()使用方法。 如果使用的是單頁應用框架,可以為視圖(view)消息創建一個樣式,為模型(models),集合(collections),控制器(controllers)等創建另一個樣式。也許還可以像wlog,clog和mlog一樣發揮想象力!


          11. 觀察特定函數的調用及參數

          在Chrome控制臺中,可以觀察特定的函數。每次調用該函數,就會打印出傳入的參數。

          var func1 = function(x, y, z) {
          //....
          };
          

          輸出:

          這是查看傳入函數參數的好方法。但是,如果控制臺提示我們形參的數目就更好了。在上面的例子中,func1期望3個參數,但是只有傳入了2個參數。如果在代碼中沒有處理這個參數,就很可能出錯。


          12. 在控制臺中快速訪問元素

          控制臺中比querySelector更快的方法是使用美元符號,$('css-selector')將返回CSS選擇器的第一個匹配項。$$('css-selector')將返回所有匹配項。如果多次使用一個元素,可以把它保存為一個變量。


          13. Postman 很棒(但Firefox更快)

          許多開發人員使用Postman查看ajax請求。Postman真的很優秀。但打開一個新的窗口,寫入請求對象,然后再來測試它們,顯得很麻煩。

          有時使用瀏覽器更容易。

          當你使用瀏覽器查看時,如果請求一個密碼驗證頁面,不需要擔心身份驗證的cookie。下面看,在Firefox中如何編輯并重新發送請求。

          打開控制臺并切換到network選項卡。右擊所需的請求,然后選擇編輯并重新發送。現在可以改變任何想要的改的。更改標題并編輯參數,然后點擊重新發送。

          下面我用不同的屬性發起的兩次請求:


          14. 中斷節點更改

          DOM是一個有趣的東西。有時候它會改變,你并不知道為什么。 但是,當您調試JavaScript時,Chrome可以在DOM元素發生更改時暫停。你甚至可以監視它的屬性。在Chrome控制臺中,右擊該元素,然后在設置中選擇中斷:

          譯者:SlaneYang
          原文:https://raygun.com/javascript-debugging-tips  

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/57

          移動web真機調試-Browsersync

          BrowserSync能讓PC、各移動設備使用各種瀏覽器的頁面同時實時地響應文件的更改,而不用刷新操作。而且,當在其他一個設備上進行點擊等行為時,該行為也會同步到其他瀏覽器中

          javascript怎樣調試代碼?

          查找編程代碼中的錯誤被稱為代碼調試。調試并不簡單。但幸運地是,所有現代瀏覽器都有內置的調試器。內置的調試器可打開或關閉,強制將錯誤報告給用戶。

          Flutter 應用調試

          程序調試是程序投入運行之前,使用手工或編譯程序等方法進行的測試,主要用以修正語法錯誤和邏輯錯誤。程序調試是保證計算機信息系統正確性的必不可少的步驟,在Flutter應用開發中,Android Studio和VSCode是兩種比較常見的集成開發環境

          如何調試javascript代碼?

          有時代碼可能會包含某些錯誤。而作為腳本語言,JavaScript無法在瀏覽器中顯示任何錯誤消息。但是,這些錯誤卻會影響輸出。找出這些錯誤的最佳做法就是調試代碼。我們可以使用內置的Web瀏覽器調試器來輕松調試代碼

          是時候拋棄Postman了,試試 VS Code 自帶神器插件

          接口調試是每一個軟件開發從業者必不可少的一項技能,一個項目的完成必然經過大量的接口測試,實際開發過程中,接口調試的時間不比實際開發所用的時間少。作為前端開發人員

          九大Java性能調試工具

          NetBeans分析器是NetBeans的擴展,用于為NetBeans IDE提供分析功能。NetBeans IDE是一個開源的集成開發環境。NetBeans IDE支持開發所有Java應用程序類型(Java SE(包括JavaFX),Java ME,Web,EJB和移動應用程序)

          JS反調試技術

          本文簡單整理一下日常使用到的JS反調試技術,主要目的防止非法用戶查看網頁運行流程,分析代碼。雖然不是絕對安全的,但也在一定程度上提高了調試破解的難度。在Chrome瀏覽器中,最常用到的就是DevTools工具進行調試JS

          vConsole_vue移動端調試

          當我們在瀏覽器開發vue頁面時,由于瀏覽器對于調試有天然的支持,我們開發起來很方便。但是現在已經進入了移動端時代,移動端頁面的需求越來越大。在開發移動端頁面的時候我們通常是在瀏覽器完成開發完成

          移動端調試工具推薦

          vConsole騰訊出品的 Web 調試面板,相信不少前端小伙伴都用過。Charles 是一款強大的抓包工具,可以截取包括 https 在內的各種網絡請求并方便的查看具體信息。weinre是一款很不錯的網頁檢查工具,可以通過在本地啟動一個 weinre 服務

          Js調試:console對象

          console.log方法用于在控制臺輸出信息。它可以接受一個或多個參數,將它們連接起來輸出。warn方法和error方法也是在控制臺輸出信息,它們與log方法的不同之處在于,warn方法輸出信息時,在最前面加一個黃色三角

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网