使用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開發環境的步驟
您可能感興趣的文章:
相關文章
使用VScode 插件debugger for chrome 調試react源碼的方法
代碼調試,是我們前端日常工作中不可或缺的能力了吧! 在面向dom開發的時代,我們開發時直接在chrome里打斷點是很方便的。 但是,當我們面向組件開發時(2019-09-14Node.JS用純JavaScript生成圖片或滑塊式驗證碼功能
有一些Node.JS圖片生成類庫,比如node-captcha等的類庫,需要c/c++程序生成圖片。跨平臺部署不是很方便。這里介紹幾個用純JS實現的圖片驗證碼生成模塊。 capt2019-09-14
最新評論