js斷點功能讓人興奮不已,以前只能在ie中靠alert彈出視窗除錯js**,那樣的開發環境對於前端程式設計師來說簡直是一場噩夢。本篇介紹sources的具體用法,幫助各位在開發過程中夠愉快地除錯js**,而不是因它而發瘋。
首先開啟f12開發工具切換到sources面板中
sources功能面板是資源面板,他主要分為四個部分,四個部分並不是獨立的,他們互相關聯,互動共同實現乙個重要的功能:監控js在執行期的活動。簡單來說就是斷點啦。
首先我們來看區域1,它的功能有些類似於resources面板,主要是顯示網頁載入的指令碼檔案:例如css, js等資源檔案(它不包含cookie,img等靜態資源檔案)。
區域1的導航條上有三個tab切換選項,他們都存有不同網域名稱和環境下的js和css檔案,我們首先來說明sources(資源)選項的作用:
sources: 包含該項目的靜態資源檔案。雙擊選中檔案,該檔案內容會在區域2中顯示,如果你選中的是js檔案,那麼你可以在區域2種單擊行號進行斷點除錯,只要js執行到了你所標記的這一行,它會停止向下執行並且等待你的命令:
從上圖可以看到js執行到斷點處時各個區域的變化,首先是區域3中的breakpoints記錄資訊會變高亮,然後是區域4中scope選項中列出了斷點處私有和公有的變數資訊,這樣,我可以很直觀地知道,此時此刻js的執行狀態。同樣的,你可以把滑鼠放到區域2種的某個變數上,瀏覽器會彈出乙個小框框,框框裡面則是你懸浮其上的變數所有資訊:
然後,你可以按f10跟著js執行的路徑一步一步地走下去,如果你遇到了乙個函式包含著另外乙個函式,那麼你可以按f11進入到個函式中去觀察它的**執行活動。你也可以通過點選區域1底部的各個圖示對js**進行跟蹤。不過我建議你使用快捷鍵,故名思義,因為它比較快捷方便。不過怎麼用完全按照個人習慣來吧。下圖是各個按鈕的作用功能。
在上圖藍色圓圈中數字,它們分別代表:
1、停止斷點除錯
2、不跳入函式中去,繼續執行下一行**(f10)
3、跳入函式中去(f11)
4、從執行的函式中跳出
5、禁用所有的斷點,不做任何除錯
6、程式執行時遇到異常時是否中斷的開關
接下來在區域4種切換到watch expressions選項,它的作用是為目前斷點新增表示式,使得每次斷點往下走一步都會執行你寫下的js**。需要注意的是這個功能必須謹慎使用,因為這可能會導致你寫下的監控**段會不斷地被執行。
為了避免你的除錯**重複執行,我們可以在除錯時直接在console控制台上一次性地輸出當前斷點處的資訊(推薦這樣做)。為了驗證我們在console面板中擁有的是當前斷點環境,我門可以對比斷點執行前後的this值變化。
如果你覺得在斷點的時候為了看乙個變數必須借用console面板輸出的方式來檢視會比較麻煩,那麼你可以更新最新版的chrome,它已經為我們解決了這個煩惱。為了方便開發者除錯,在這一點上谷歌已經做到了極致,就在前幾天更新過chrome以後,滷煮意外地發現了斷點時監控環境變數的另外一種方式,這種方式極為清晰,在斷點除錯的時候,區域2中會自動顯示每個變數的值,每次**往下走的時候這個值都回時時更新。這讓開發者對當前環境變數幾乎可以說是一目了然。(此功能有乙個小缺陷,那就是無法檢視陣列或者物件的具體索引和值,不過我相信google會改進它的。)
即使在斷點時,你也可以編輯**,按ctrl+s儲存之後,你會看到區域2的背景由白色變為淺色,而斷點會重新開始執行。
在snippets選項的空白處右鍵後選擇彈出的new選項,建立乙個你自己的新的檔案,然後在區域2種編輯它。
snippets的非常功能強大,它的許多隱藏功能還有待發掘。目前滷煮使用它是在記住除錯片段、單元測試、少量的功能**編寫功能上。
最後我們看看js中時間豐富的監控功能,同上篇文章介紹的一樣,sources面板和elements面板一樣有監控事件的功能,而且sources中功能更加豐富,也更加強大。它的這部分功能集中在區域3中。我以下圖為例,觀察其作用。
從上到下,紫色圈內的數字的意義:
1、斷點處的債堆疊,就是從該函式起,逐級追尋呼叫到他的函式名。例如:
2、在區域2中你的斷點除錯資訊。當某個斷點在執行的時候對應的資訊會高亮,雙擊該處資訊可以在區域2中快速定位。
4、擊+ 並輸入 url 包含的字串即可監聽該 url 的 ajax 請求,輸入內容就相當於 url 的過濾器。如果什麼都不填,那麼就監聽所有 xhr 請求。一旦 xhr 呼叫觸發時就會在 request.send() 的地方中斷。
5、為網頁新增各種型別的斷點資訊。如選中了mouse中的某一項(click),當你在網頁上出發這個動作(單擊網頁任意地方),你瀏覽器就是立刻斷點監控該事件。
谷歌瀏覽器開發者工具標籤介紹
谷歌瀏覽器開發者工具標籤介紹 一般在windows系統上瀏覽器開發者工具開啟都是按f12快捷鍵.element標籤 該標籤使用來檢視頁面的html標籤元素的，能夠也就是檢視原始碼，我們可以看到布局，可以看到用到的樣式，還有用到的鏈結等等。console標籤 這個就是乙個web控制台 sources標...
web開發者谷歌瀏覽器常用外掛程式
1.allow control allow origin 安裝此外掛程式解決跨域問題，在本地起伺服器可訪別的域的資料。需在access control expose headers加上allow control allow origin 表示允許所有ip訪問 2.clear cache 一鍵清瀏覽器...
chrome瀏覽器開發者工具之同步修改至本地
相信好多小夥伴喜愛webpack的熱載入技術，省時而又不繁瑣，討厭f5或者ctrl f5。嘿嘿，現在介紹大家乙個在瀏覽器中修改直接同步到本地 修改的方法 程式設計師都是從0開始數數的！第0步 在你要更改的檔案裡開啟本地修改 第一步 新增檔案到工作區 第二步 允許請求 第三步 在允許的介面新增地圖源連...