Rumah > hujung hadapan web > tutorial js > 怎么在react代码中打断点

怎么在react代码中打断点

藏色散人
Lepaskan: 2022-12-30 11:11:58
asal
6031 orang telah melayarinya

在react代码中打断点的方法:首先打开chrome浏览器中的扩展程序;然后依次点击“扩展程序->打开Chrome网上应用店”;接着搜索react developer tools并安装;最后在react代码中打断点即可。

怎么在react代码中打断点

本文操作环境:windows7系统、Dell G3电脑、react17.0.1&&chrome87.0。

推荐:《react视频教程

1、安装React Developer Tools调试工具

首先在Chrome中安装React Developer Tools调试工具

React Developer Tools 是一款由 facebook 开发的有用的 Chrome浏览器扩展。使用 React Developer Tools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。

注意:该插件只对 ReactJS 开发有效。如果是 React Native 的话则无法使用这个插件调试。

1)、点击chrome浏览器右上角三个点-更多工具->扩展程序(或者在浏览器里面直接输入chrome://extensions/也可以进入到扩展程序里面)

2)、点击左上角【扩展程序】-【打开Chrome网上应用店】

97016248ee0c3fbc20c6971792531f2.png

3)、搜索react developer tools,选择安装、添加至Chrome 即可。

55dc92ba323d2f984391bf40e939e5a.png

4、安装完毕后打开扩展程序管理页面。将 React Developer Tools 的“允许访问文件网址”勾选。

5f952514f60620ff9e38b9da84ae2e5.png

5、使用

f6e9ee3ed3e927d8c3880d452d73031.png

2、在react代码中打断点

0ba25227ee0c3c41c86b8afcaa6d945.png

4020d306612df98fb3f0616f5504b4b.png

(2) F8继续调试;

(3) F11进入Javascript中的函数体调试;

(4) F10 进入下一行;

f10是执行下一行js代码

f11是进入当前行方法

f8是让代码继续运行

Atas ialah kandungan terperinci 怎么在react代码中打断点. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan