chrome如何載入js,chrome如何載入插件

本文目錄一覽：

按下F12快捷鍵，點擊chrome開發者工具中的Resources面板，

依次點擊frames, 文件夾，展開script即可得到js文件。

是可以調試js的。

使用的工具：谷歌瀏覽器、測試的網站；

可以按照下面的方法進行調試：

1、f12 打開開發者工具，控制台介紹：

Elements：頁面元素，可以進行編輯，保存後實時查看頁面效果；

Network：查看js模擬的http請求，例如下圖中修改購物車中商品數量，可以實時的看到請求地址，直接上圖。

2、點擊請求地址，會把請求的頭信息和響應信息等數據展示出來，此處非常便捷，展示樣式比firebug更直觀，直接上圖，可以點擊查看頭信息，preview，響應信息，cookie，timeline對我們有用的。注意，preview是此處模擬http請求的發送數據，直接預覽出來了。

3、Sources：次功能是js頁面調試中最突出的功能，上圖。

功能介紹：左側sources目錄可以展開，查看載入本頁面所調用的資源，如js，css，php。此處先介紹斷點調試，可以順序的看到程序的執行過車，勾選右側的Any XHR 按鈕，上圖。

4、一步一步執行，如添加數量的時候，可以看到右側的call stock進程，可以看到此處出發了js中changePrice()函數，在此處我們可以進行邏輯分析了。或則在代碼行處單擊設置斷點，英文選項是add breakpoints，單擊右擊都可以，最是好用，上圖。

5、可以查看你設置的所有斷點，右側展開，如圖，斷點調試用的比較多，當然了還可以在js里直接寫代碼，查看實時數據變化，查看要注意ctrl+s 保存操作。

6、Timeline：次功能是查看頁面性能，頁面渲染速度的，一般是用不到的。測試人員可以查看，圖中展示一些性能參數供參考，上圖。

Profile：次功能主要測試載入文件速度參考，可以在此處上傳我們的文件供測試用。點擊 Load上傳即可，一般用不著。

備註：Console：此功能是模擬js控制台，直接寫代碼，查看結果。高級功能使用時開啟斷點，查看變數的變化過程。還可以條用函數。

腳本載入後、進入開發者模式（F12）、點擊Sources菜單、雙擊打開要調試的js文件、斷點調試

進入chrome瀏覽器，F12進入web控制台。點擊console可以針對當前頁面進行JavaScript功能調試。

啟用或者關閉JavaScript功能：F12進入web控制台，點擊右側的settings按鈕，在General中的第一個複選框為 Disable JavaScript ，選中後即可禁用JavaScript功能。

方案一：在script代碼的頭部或者尾部加上//@ sourceURL=xxx.js，然後在(no domain)裡面找到它進行調試,如果使用firefox瀏覽器，直接在debug中就可以找到xxx.js

方案二：將js的非同步載入換成為同步載入

第一種方案非常方便。

用記事本打開本地user.js文件Ctrl+A全選，再按Ctrl+V複製打開Chrome進入Tampermonkey管理界面選擇添加腳本將代碼粘貼後保存即可

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/227580.html