你應該瞭解的 5 個 JavaScript 除錯技巧
我之前使用過用printf debugging,自此之後我用這種方法似乎總能更快地解決bug。
在某些情況下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你會發現它們的有用之處:
1. debugger;
正如我之前提到的,你可以使用“debugger;”語句在程式碼中加入強制斷點。
需要斷點條件嗎?只需將它包裝它在IF子句中:
if (somethingHappens) {
debugger;
}
只需記住在上線前移除。
2. 當節點變化時斷開
有時DOM像有了自己的想法。當不可思議的變化發生時很難找到問題的根源。
Chrome開發人員工有除錯這個問題的超級有用技能。這就是所謂的“Break on…”,你可以通過在元素選項卡上右鍵DOM節點找到它。
斷點可以在節點被刪除後設定,當節點的屬性更改或者其子樹中的節點變化時。
3. Ajax斷點
XHR斷點或我稱作的Ajax斷點,也允許當一個預期Ajax請求建立時斷開。
當除錯你的web應用的網路時這是個讓人吃驚的工具。
4. 模擬不同的移動裝置
Chrome增加了內建的移動裝置模擬工具,這將簡化你的日常工作。
選擇任何非Console的選項卡找到它們,按鍵盤上的esc鍵並選擇你想摸你的移動裝置。
你當然不會得到一個真正的iPhone,但尺寸、觸控事件和agemt都會為你效仿。
5. 通過稽核提升你的站點
YSlow是個偉大的工具。Chrome也在開發人員工具下包含一個稱作Audits的類似工具。
使用快速稽核一下你的網站,來獲得有用實際的優化技巧。
還有什麼呢?
沒有這些工具我不能想象如何開發。當我發現新的後我會發布更多,敬請期待。
原文地址:http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today
相關文章
- 5 個 JavaScript 除錯技巧JavaScript除錯
- 【Camera專題】Qcom-你應該掌握的Camera除錯技巧一除錯
- 【譯】你應該瞭解的 CORSCORS
- 關於JavaScript的作用域你應該瞭解的那點事!JavaScript
- JavaScript 反除錯技巧JavaScript除錯
- 老司機常用的幾個JavaScript除錯技巧JavaScript除錯
- 每個JavaScript開發人員都應該瞭解UnicodeJavaScriptUnicode
- 8 個你應該瞭解的環保開源專案
- 你應該瞭解的 Java SPI 機制Java
- 你應該瞭解的MySQL鎖分類MySql
- 你應該瞭解一下 Vue NativeVue
- 前端應該瞭解的PWA前端
- 或許是你應該瞭解的一些 ASP.NET Core Web API 使用小技巧ASP.NETWebAPI
- 推薦幾個不錯的console除錯技巧除錯
- CSS Tricks - 你應該知道的 CSS 技巧CSS
- JavaScript 中 JSON 的 5 個小技巧?JavaScriptJSON
- [譯]關於NODE_ENV,哪些你應該瞭解
- Java8新特性,你應該瞭解這些!Java
- Chrome DevTools 中你可能不知道的 9 個除錯技巧Chromedev除錯
- Python 的技巧和方法你瞭解多少?Python
- chrome的除錯技巧Chrome除錯
- 【譯】2019年JavaScript開發者應該都在用的9個棒的技巧JavaScript
- 12個Visual Studio除錯效率技巧除錯
- 前端你應該瞭解的資料結構與演算法前端資料結構演算法
- 你應該瞭解的流行圖資料庫查詢語言資料庫
- 這份Python標準異常表你應該瞭解!Python
- 除了FastJson,你也應該瞭解一下Jackson(二)ASTJSON
- 除了FastJson,你也應該瞭解一下Jackson(一)ASTJSON
- 每個 JavaScript 開發者都該瞭解的 ES2018 新特性JavaScript
- 你應該知道的關於SEO和Javascript的6個事實JavaScript
- JavaScript 你真的瞭解this指向嗎JavaScript
- DevOps 團隊應瞭解的 5 個安全威脅dev
- 你該瞭解的HTTP協議(彙總)HTTP協議
- IT行業的5個熱門崗位,你瞭解嗎?行業
- 你所不知道的 Chrome 控制檯除錯技巧Chrome除錯
- 【Camera專題】你應該瞭解的Camera HW-硬體知識
- 關於大資料你應該瞭解的五件事兒大資料
- console 除錯技巧除錯
- Chrome 除錯技巧Chrome除錯