已解决:React在Chrome F12 调试台断点调试中跳过node_modules内部黑盒

一、debugger代码如下

当我在探究根节点和容器源码时候,将debugger代码添加在如下位置:

import React from 'react'; //用到JSX
import ReactDOM from 'react-dom/client';
import App from './App';

const parent_node = document.getElementById('root'); //获取根节点
debugger;
ReactDOM.createRoot(parent_node).render(); //将div添加到根节点; //创建一个根节点

// export interface Root {
//     render(children: React.ReactNode): void;
//     unmount(): void;
// }

二、运行React,浏览器控制台直接跳过内部React的node_modules内部黑盒

当我点击下一步时,程序直接结束。遇到这种情况,无法得知黑盒内部源码运行机制。(博主最开始遇到问题时无图片最下方黄色提示部分,解决问题将问题还原后才新增的提示)

已解决:React在Chrome F12 调试台断点调试中跳过node_modules内部黑盒_第1张图片

三、解决方案

在最左侧文件夹一栏中,右键node_modules,点击将其“从忽略列表中移除”,问题解决。

已解决:React在Chrome F12 调试台断点调试中跳过node_modules内部黑盒_第2张图片

你可能感兴趣的:(react.js,chrome,javascript,浏览器控制台,React源码)