javascript 調試技巧

標籤：改變   cti   最佳化   select   右鍵   美化   function   調用   for   

1.列印輸出資訊

console.log 用於通常的列印資訊
console.table 列印對象資訊；
console.trace(‘trace car’) 查看函數的調用棧，特別地有效。

3.斷點調試

有三個方法，
一、直接找出程式碼加個斷點；
二、在代碼中添加debugger，瀏覽器會自動在debugger那裡停住
三、在控制台輸入debug(car.funcY) 。

if (thisThing) {    debugger;}

4.響應式調試

可以調試移動端視域

5.統計代碼塊執行需要的時間

對於迴圈的統計最佳化特別有效

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

7. {} 美化壓縮的代碼8. 監控函數接受到的參數

在控制台輸入monitor(functionName)

9. 快速擷取元素

在控制台輸入 $(‘css-selector’) ，將返回第一個匹配的元素；
$$(‘css-selector’) 將返回所有匹配的元素。

10.可以在網路tab右鍵編輯重髮網絡請求

此操作用來補填缺失欄位重新請求參數，完善參數特別有效

11. 可以在Dom面板右鍵添加監控，查看dom元素為啥會發生改變

javascript 調試技巧