歡迎來到大唐傳易博客!

互聯網技術

當前位置:首頁 > 互聯網技術 >

前端技術進階:用瀏覽器來斷點調式

時間:2019-11-04|欄目:互聯網技術|網站標簽: 瀏覽器調式 |點擊:

    前端自從出現了MVVM架構之后,一直火爆到現在,據說阿里巴巴當時不管有用沒用的前端都招過來了,說實在不管是vue、還是react他們的核心語言也是JavaScript,而技術的進階的話還是要看基本功就是對JavaScript的了解程度,所以你會發現一些程序編程大牛,到最后還是會回頭看JavaScript的基礎,因為架構可能發生改變但是原生基礎是改變不了的。

   那么想要深入了解JavaScript的話,就必須對瀏覽器中的調式工具應用的熟練,瀏覽器中擁有一個神一樣的調式工具,這通常是前端程序員進階的分水嶺。那就是"斷點調式",千萬別小瞧這個,很多公司通過一個項目的bug來看程序員是如何打斷點并且找到解決方案,來判斷前端程序員的水平的。

   以chorme瀏覽器調式為例子:


   

快捷鍵F12或者通過設置打開開發者工具看到sources就是斷點調式的入口

 
    首先在實例之前的話我要介紹下斷點的類型:

    普通斷點:

 
     

這種藍色的就是普通的斷點

 
    條件斷點:
 
    

通過打完斷點之后右鍵選擇Edit Breakpoint...”可以設置觸發斷點的條件,就是寫一個表達式,表達式為 true 時才觸發斷點。
 
    斷點要怎么打才合適?

    
雖然說打斷點的操作是比較簡單的,但是打斷點到底應該如何打呢?通常來說一個程序擁有bugs時我們運用到斷點是比較多的,比如下圖所示:
 
     

本來點擊加載更多完之后會有更多的數據

 
     有經驗的程序員看到這種情況一般來說要么是后端的接口產生問題了,要么自己的ajax出現了問題,這個時候就可以用斷點進行調式。其實可以現用postman調式一下后端的數據是否出現問題了,如果后端訪問的是正常的,那么基本是我們的前端代碼出現問題了。前端點擊無效果如果細分的話也有很多因素(選擇器錯誤,語法錯誤,被選擇的元素是后生成),這些的話,就需要程序員通過采用console來配合基本功來慢慢調式。最終找到問題所在,然后來改掉bug!

上一篇:域名訪問網站的工作原理

欄????目:互聯網技術

下一篇:瀏覽器跨域問題深入剖析

本文標題:前端技術進階:用瀏覽器來斷點調式

本文地址:http://www.utuupp.live/hlwjs/751.html

您可能感興趣的文章

說點什么吧
  • 全部評論(0
    還沒有評論,快來搶沙發吧!

| |

如果侵犯了您的權利,請與我們聯系,我們將在24小時內進行處理、任何非本站因素導致的法律后果,本站均不負任何責任。

Copyright © 2016-2019 福州大唐傳易網絡科技有限公司 版權所有

浙江11选5直播