使用VScode 插件debugger for chrome 調試react源碼的方法
更新時間：2019-09-14 22:01:12 作者：佚名 
我要評論(0)
在面向dom開發的時代，我們開發時直接在chrome里打斷點是很方便的。
但是，當我們面向組件開發時(
代碼調試，是我們前端日常工作中不可或缺的能力了吧！
在面向dom開發的時代，我們開發時直接在chrome里打斷點是很方便的。
但是，當我們面向組件開發時(react),瀏覽器拿到的是我們編譯過后的代碼，還想在瀏覽器里打斷點幾乎是不可能的了。
場景
那怎么辦，方法總是比困難多！愚蠢的我想到了console/debugger！！一直在使用，雖然很不方便（打印太多實在太亂！上線還要配置刪除掉），但是我竟然使用了很久（這真是一個糟糕的編碼習慣吧）。直到今天，我想研究一下react源碼，需要斷點的地方有很多，不可能在手動console/debugger了！！我才想到我為什么不用瀏覽器debugger？
Debugger for Chrome
因為我使用的編譯器是VS code，機智的我終于開竅了！找來了 Debugger for Chrome插件。
但是純英文的文檔不太友好，雖然我英語六級也是搞了很久才弄好，下面就介紹記錄一下mac系統下的使用方法吧。完整文檔需要可以自己看文檔
1、加載插件
2、配置插件
點擊小蟲子；選擇chrome；
然后點擊小輪子，打開launch.json文件如下：
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch", //launch / attach 兩種方式；這里使用launch
"name": "Launch Chrome against localhost",//開心的設置個名字
"url": "http://localhost:9000",//項目地址
"webRoot": "${workspaceFolder}/react-demo/"
//這一塊設置時要注意！webRoot指定網絡服務器根目錄的工作區絕對路徑。
${workspaceFolder}應該時表示編輯器里的根目錄，我的項目是react-demo，
所以選擇webRoot修改如上，具體路徑還跟webpack配置的資源根目錄也有關系
}
//還有很多可以配置的屬性，可以通過上面文檔查看
]
}
3、開始調試
點擊小按鈕，就開始調試模式了；像下面就能在我們的源代碼打斷點；
開始調試后，多出來一個小窗，可以控制斷點走向，以及結束暫停、調試。下方會顯示斷點列表。
同時，會為我們打開我們配置的url頁面；
還可以看到調用堆棧，和打印臺，可以說十分方便
OK到這里我們的react調試配置已經可以使用了，不用在手動寫debug了！可以開始愉快的搬磚了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- VSCode 配置React Native開發環境的方法
- VSCode配置react開發環境的步驟
您可能感興趣的文章:
相關文章
- 這篇文章主要介紹了微信小程序使用函數防抖解決重復點擊消耗性能問題實現代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值2019-09-14
使用VScode 插件debugger for chrome 調試react源碼的方法
代碼調試，是我們前端日常工作中不可或缺的能力了吧！ 在面向dom開發的時代，我們開發時直接在chrome里打斷點是很方便的。 但是，當我們面向組件開發時(2019-09-14
前言 小程序本身是不支持async/await語法的，但有些應用場景，我們使用async/await會使得代碼更簡潔，也更易于維護，用過都知道是有多爽的。既然小程序不支2019-09-14- 數據表格 t2 = { elem: '#test2', data: tableData2, page: false, width: $(parent.window).width()-50, cols: [[2019-09-14
- 方法一 通過done回調進行遍歷： //方法級渲染 table.render({ id: 'demoList', elem: '#demoList' , url: 'showDemoList' ,2019-09-14
- 簡單的文件服務器 有時候，我們想讀取一些服務器上的文件，但是又不想寫太復雜的程序，可以考慮用nodejs，可以很簡單的寫出一個文件服務器 下面是我寫的2019-09-14
-
Node.JS用純JavaScript生成圖片或滑塊式驗證碼功能
有一些Node.JS圖片生成類庫，比如node-captcha等的類庫，需要c/c++程序生成圖片。跨平臺部署不是很方便。這里介紹幾個用純JS實現的圖片驗證碼生成模塊。 capt2019-09-14 - 通常layui前端頁面完全按照layui官網的例子寫所有的頁面初始化都沒有問題,但是那只是靜態頁面.當加入后臺去動態加載頁面的時候有寫樣式在初始化加載樣式的時候2019-09-14
- HTML 的拖放 API 依賴 DOM 事件模型，獲取拖放和放置元素的相關信息，以此實現拖放功能。我們只需要注冊很少幾個事件監聽器，就能把任何元素變成可拖動或可放2019-09-14
- layui2.3版本，本身并不帶有復選框回顯功能，那么需要從源頭解決此事，F12代碼調試，找到與復選框關聯的地方發現： 我們只需要在渲染數據回調時找到每個復選2019-09-14
最新評論