[项目][准备4] 调试体验

学习目标

在准备4中，我们将尝试调试React项目。

学习参考

下列链接建议详细学习：

• ReactJS学习系列课程(React 调试工具集)

实践示例

准备工作

• 参考准备3，clone或下载准备3整个项目，得到下方目录结构
• 添加源码映射：打开项目中的”webpack.config.js”文件，在”devServer : {“上方，添加”devtool: ‘eval-source-map’,”
• 下载并安装Google Chrome浏览器
• 点击链接react-devtools-0.14.6.crx下载该文件
• 打开Google Chrome浏览器，打开chrome://extensions/，将react-devtools-0.14.6.crx拖动到窗口中，按提示安装并启用

目录结构

-prepare3
    -app
        -components
            Button.jsx
            ButtonContainer.jsx
            ResultShow.jsx
        -containers
            App.jsx
        index.js
    .gitignore
    package.json
    webpack.config.js

操作步骤

1. 打开命令终端，将目录切换到prepare3目录
2. 执行npm install命令，保持网络畅通，耐心等待执行完成
3. 执行npm run start命令，等待”webpack: bundle is now VALID.”出现
4. 用Chrome浏览器打开http://localhost:8080/
5. 快捷键ctrl+shift+I打开开发者工具面板
6. 在React选项卡中，可以按树状结构查看组件关系、查看并修改props和state，每当状态有变化，窗口中都会有清晰的提示
7. 在React选项卡中，右键单击组件，在弹出菜单中点击”Show Source”，即可跳转到组件对应源代码，可以进行下断点、单步调试、查看变量等操作
8. 在Sources选项卡中，也可以手动找到组件的源代码，同样可以进行调试操作