參考 "https://blog.csdn.net/yin767833376/article/details/51656402" "https://developer.mozilla.org/en US/docs/Web/API/Console Usage" Alert 優點 1. 阻塞執行 缺點 ...
參考
Alert
- 優點
- 阻塞執行
- 缺點
- 必須清理
- 遮擋
console
console提供了訪問瀏覽器控制台的能力,在全局可以拿到,web workers中也可以,不只是log
- 優點
不阻塞,多種多樣
可以不清理
- 缺點
- 清理麻煩,不清理冗餘
- 一些方法
- console.log()
- Console.assert() 可以列印堆棧信息
- console.clear() 清理控制台
- console.count([label]) 統計次數的
- console.error() 打錯誤日誌,可以類似打堆棧使用
- console.group() 相當於增加縮進
- console.groupEnd() 相當於減少縮進
console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);
跟log差不多- console.table(me); 通過key,value對象打表
- console.time() console.timeEnd() 用這個可以計算一段代碼執行的時間
- console.trace() 列印調用棧
console.warn(msg [, subst1, ..., substN]) 列印警告
chrome斷點調試
添加斷點
source -> ctrl+p找到要打斷點資源 -> 點行號就可以加斷點了
source下右側面板介紹
watch 顯示了要跟蹤的變數當前的值,在這裡可以添加跟蹤,取消跟蹤等操作
ps:可以在資源文件選中右鍵加watch 選項為 Add selected selected text to watches
callback 顯示了函數調用棧,
scope 顯示了當前作用域中的變數
breakpoints顯示了添加的斷點,可以添加的斷點進行操作,例如移除多有斷點,禁用所有斷點等
XHR/fetch BP
可以在任何xhr fetch斷,也可以指定URL
DOM Break points 後面看
global listeners
這個我也沒打看懂是啥意思
- Event Listener Break points
看了下有很多很多的事件可以加斷點,不僅僅是mouse事件,鍵盤事件
還有類似
Animation
Canvas
Clipboard
Control
DOM Mutation
Device
Drag / drop
這些東西，很多應該也用不上的DOM斷點
這個也是chrome中有的.
- 添加方法
進element面板 -> 選中要加斷點的dom結點-> 右鍵 -> 選擇break on -> 然後幾個選項自行體會
debugger
這個跟上邊的chrome source斷點差不多,就是在js代碼寫debugger,然後運行到那裡就會停下來.像這樣.功能方面對比上面就有些弱了.不過那你的資源很難找時還是不錯的選擇
<script>
function sum(a,b) {
debugger;
return a*b;
}
sum(1,5);
</script>強大的IDE
要是我們的代碼不依賴宿主，不需要window，document之類，可以在IDE中調試，用node環境
以visual studio code 為例
在行號左邊點擊可以加斷點，右鍵還能加條件斷點
F5 可以啟動調試
左側面板可以看到
變數信息
監控的變數
函數調用棧
斷點信息
還有一些快捷鍵記錄一下
F5 啟動調試
F10 單步跳過
F11 單步前進
shift+F11 單步後退
shift + F5 停止
Ctrl + shift + F5 重來
