在react代碼中打斷點的方法

發(fā)布時間：2021-01-18 11:12:02 來源：億速云閱讀：1171 作者：小新欄目：web開發(fā)

這篇文章主要介紹了在react代碼中打斷點的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在react代碼中打斷點的方法：首先打開chrome瀏覽器中的擴展程序；然后依次點擊“擴展程序->打開Chrome網(wǎng)上應用店”；接著搜索react developer tools并安裝；最后在react代碼中打斷點即可。

1、安裝React Developer Tools調(diào)試工具

首先在Chrome中安裝React Developer Tools調(diào)試工具

React Developer Tools 是一款由 facebook 開發(fā)的有用的 Chrome瀏覽器擴展。使用 React Developer Tools 進行調(diào)試時，可以查看應用程序的 React 組件分層結(jié)構(gòu)，而不是更加神秘的瀏覽器 DOM 表示。

注意：該插件只對 ReactJS 開發(fā)有效。如果是 React Native 的話則無法使用這個插件調(diào)試。

1）、點擊chrome瀏覽器右上角三個點-更多工具->擴展程序（或者在瀏覽器里面直接輸入chrome://extensions/也可以進入到擴展程序里面）

2）、點擊左上角【擴展程序】-【打開Chrome網(wǎng)上應用店】

在react代碼中打斷點的方法

3）、搜索react developer tools，選擇安裝、添加至Chrome 即可。

在react代碼中打斷點的方法

4、安裝完畢后打開擴展程序管理頁面。將 React Developer Tools 的“允許訪問文件網(wǎng)址”勾選。

在react代碼中打斷點的方法

5、使用

在react代碼中打斷點的方法

2、在react代碼中打斷點

在react代碼中打斷點的方法

(2) F8繼續(xù)調(diào)試；

(3) F11進入Javascript中的函數(shù)體調(diào)試；

(4) F10 進入下一行；

f10是執(zhí)行下一行js代碼

f11是進入當前行方法

f8是讓代碼繼續(xù)運行

感謝你能夠認真閱讀完這篇文章，希望小編分享的“在react代碼中打斷點的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

向AI問一下細節(jié)

猜你喜歡