聊聊除錯的事兒

2021-09-11 14:47:06 字數 1011 閱讀 7025

很多的前端入門新手包括我在內,剛開始都不怎麼會使用除錯工具,用的比較多的就是console了。

bug可以說是程式猿的公敵了,所以沒有bug是不可能的,有bug也不是什麼丟人的事,至少還知道問題在哪,那麼接下來就應該debug啦,下面就讓我們從瀏覽器斷點除錯、**斷點除錯、編輯工具斷點除錯幾個方面來聊聊除錯的事兒。

1.如上圖所示,根據報錯的位置點進去,到了source,也就是下圖所示。

2.在**左側打斷點後,按f5重新整理。

3.滑鼠指標放到你要監聽的變數,觀察值。

在**裡你想debug的地方寫debugger

var map = function(a, f) 

return result;

}複製**

在瀏覽器中就可以自動跳到你打斷點的位置了。

滑鼠指標放到你要監聽的變數,觀察值。

因為我使用的是vscode,所以這裡以它為例。

1.安裝debugger for chrome

然後按f5,出現這個框

選擇 chrome

3.然後出現個配置的提示,和開啟了launch.json這個檔案

"},"

},/basic/map.html",

// "url": "", //使用外部伺服器時,請注釋掉 file, 改用 url, 並將 usebuildinserver 設定為 false "

"sourcemaps": true,

"webroot": "$",

// "prelaunchtask":"build",

"userdatadir": "$",

"port": 5433

}複製**

4.更改除錯方式

5.在專案的 js 處設定好斷點,按 f5,就可以進行斷點除錯了。

總而言之,以後還是用第三種+console.log結合使用,開心地debug。

聊聊除錯的事兒

很多的前端入門新手包括我在內,剛開始都不怎麼會使用除錯工具,用的比較多的就是console了。bug可以說是程式猿的公敵了,所以沒有bug是不可能的,有bug也不是什麼丟人的事,至少還知道問題在哪,那麼接下來就應該debug啦,下面就讓我們從瀏覽器斷點除錯 斷點除錯 編輯工具斷點除錯幾個方面來聊聊除...

聊聊Ambari的那些事兒

文章結構 本文將從ambari的起源 架構和設計思想聊聊ambari的那些事兒。說起ambari,不得不提下 hortonworks和它的競爭對手們。由於apache社群版的hadoop在面對企業級的應用時存在穩定性 可靠性 效能 易用性等方面的限制,許多公司都對其進行了 二次包裝 這些公司被稱為h...

聊聊TPC那些事兒

最近幾天oceanbase tpc h勇奪世界第一的pr宣傳被中文自 先後報道,興奮之餘,筆者也想到,根據這些年對tpc機構以其審計師們的接觸,對tpc benchmark及其審計和發布流程有了一些了解,也聽到一些坊間的逸聞趣事,所以在恭喜oceanbase榮耀奪冠的時候,今天咱們也換個角度隨便聊聊...