前端調試bug的方法

時間 2021-08-14

標籤 javascript html java chrome 數組瀏覽器 markdown dom ide 函數欄目 JavaScript 简体版

原文原文鏈接

一：斷點調試（邏輯異常時使用）

在可能出錯的位置設置斷點
啓動調試
單部執行（F10），觀察變量的變化，將變量變化結果與預期結果進行比較，若是結果一致，則繼續執行，若是不一致，可能出錯。
找出出錯位置，修改

使用方法：javascript

建立項目(下面的是筆者寫的小demo)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>text:<span id="text">0</span></div>
	<button id="btn">text+1</button>
	<script type="text/javascript"> const textNode = document.getElementById('text'), btnNode = document.getElementById('btn'); btnNode.onclick = () => { textNode.innerHTML = (Number(textNode.innerHTML) + 2) } </script>
</body>
</html>

在你的項目頁面按F12，頁面效果以下：
html

咱們要實現的是+1但是如今的代碼是加2是有問題的，咱們就在點擊事件的那個函數設置斷點。固然了。。。我這隻有一句話的代碼是沒有必要設置斷點的，一看代碼就看到了我後面是+了2，而不是1，通常設置斷點在循環或者遞歸語句當中用的較多，由於能夠實時監視變量的變化。斷點的使用可在回看文章開頭。
當你設置完斷點之後你再次觸發你打斷點的這個事件就能夠看到變量的變化了。

console的注意事項

若是你用的是chrome瀏覽器開發，當你console變量的時候請注意一下：
若是你要console的是基本類型,好比：字符串，數字，布爾值等等能夠直接的console，
可是若是你要是準備console引用類型，好比：對象，數組等就儘可能不要直接console，由於你直接console引用類型的話瀏覽器會幫你把後面求職的結果先console出來，可能你console的這裏的這個object並非這樣的，好比說你在後面對object的amount進行了+2的操做，你在前面的地方console出來的就是+2以後的結果，而不是當下的狀態值。想要console出當下的狀態值須要把它轉變下類型，好比咱們JSON.stringify一下：console.log(JSON.stringify(object))這樣就能夠輸出當下的object的狀態值了。java