webpack 完全教程-10-devtool让源码在浏览器中可调试

[郭永峰]

devtool让源码在浏览器中可调试

我们在webpack配置文件中新增devtool字段，并设置值为source-map，这样我们就可以在浏览器中直接调试我们的源码，在控制台的sources下，点开可以看到webpack://目录，里面可以直接看到我们开发态的源代码，这样方便我们直接在浏览器中打断点调试。

代码清单：webpack.config.js

devtool: 'source-map'

devtool可以有几个配置项：

devtool	build speed	rebuild speed	production supported	quality
eval	+++	+++	no	generated code
cheap-eval-source-map	+	++	no	transformed code (lines only)
cheap-source-map	+	o	yes	transformed code (lines only)
cheap-module-eval-source-map	o	++	no	original source (lines only)
cheap-module-source-map	o	-	yes	original source (lines only)
eval-source-map	–	+	no	original source
source-map	–	–	yes	original source

[中文姓名]

https://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html

为什么里面 动图, show source 直接就能跳出来, es6 的 react 源代码呢?

1. 安装 react develop tool` chrome 扩展
2. package.config.js 文件中 加入 devtool: 'source-map'
3. 在 chrome 浏览器中 调试 react文件, . show source 看不到 es6的源文件

按照 以上三个步骤是不是就可以成功 调试 react了?

我目前 遇到的问题, 我不能调试 react.

我设置了,
devtool: 'source-map' 之后, 能看到webpack:// 目录, 但是 使用 react develop tool chrome 扩展, show source 看不到 es6的源文件啊...

[YiFeng]

我也遇到这个问题了， 请问现在解决了吗？ 我现在能看到调试文件 但是看到的都是编译打包后的文件

[YiFeng]

你 在博客中看到的组件是因为安装了 React Developer Tools这个chrome插件

[狐耳]

我也遇到这个问题了， 请问现在解决了吗？ 我现在能看到调试文件 但是看到的都是编译打包后的文件

+1