› Closure: The Definitive Guide
楼主不太会，google/baidu 了一下，貌似也没有搜索到相关的文章。
比如，用 create-react-app 创建了一个前端的应用，然后 npm/yarn install 了一个第三方的包，使用之。现在发现了一些问题，想看看是不是引用的这个包里面，哪里出了问题。怎么 debug 进去啊？在 chrome -> Developer Tools -> Sources 里面，只有我自己项目的源代码文件，没有找到引用的包的源代码文件。
这个引入的第三方的包(例如，https://github.com/justinchmura/js-treeview, etc.），在 github 上面有源代码的。把源代码 clone 下来，怎么操作，比如编译或者连接，能够在 build 我的项目时，把源代码也编进去，然后可以在 chrome 打开网站的时候，sources 里面能够找到源文件，打上断点，调试进去？
我们自己的项目是 webpack4 ，development 环境下，已经设置了 sourcemap ，但是，好像没有啥用。
万分感谢！
 |
1
zjsxwc Nov 2, 2021 via Android
一般打包工具都有 dev 模式的，你试试 dev 模式
|
 |
2
rioshikelong121 Nov 2, 2021  1
npm link
|
 |
3
zhw2590582 Nov 2, 2021
你可以把它的 github 整个源码放到你的目录，直接引入
|
 |
4
myl0204 Nov 2, 2021
开发模式下，我一般都是直接去 node_modules 中找源代码调试的
|
 |
5
yazoox OP @myl0204 "我一般都是直接去 node_modules 中找源代码调试的"
源代码我也知道在这里，可是我还是不知道如何调试。就是这一层”窗户纸“，会者不难，难者不会...... @zhw2590582 "github 整个源码放到你的目录，直接引入” 我现在是这么做的。但是 chrome 打开网站，devtools 里面，搜索源代码，就是找不到这个包的文件。是不是还需要去这个包的目录下面，添加 webpack.js 文件，设置一下打包方式，比如：mode: "development", devtool: "inline-source-map" 等等？ |
 |
6
HelloWorld556 Nov 2, 2021
在 node_modules 中找到源码写入 debugger 可以么？
|
 |
7
lneoi Nov 2, 2021
node_modules 里面下来的就是你本地直接用的文件了，要修改可以直接修改，加个 log 就能看到效果
|
|
8
zhw2590582 Nov 2, 2021
我的话不需要这样，只要能引入源码，console.log 就能走天下，不需要花里胡哨的
|
 |
9
Biwood Nov 2, 2021 via iPhone
可以调试，首先你应该直接引用 src 里面的入口文件而不是 dist 目录，其次你要在所有 loader 配置里单独 include 这个模块（因为一般 loader 都是排除了一 node_modules 的），目的是开启 sourcemap ，简而言之就是把第三方包的源码当作你自己写的源码来用
|
 |
10
yunyuyuan Nov 2, 2021
npm build 你克隆的项目，然后 npm link 到全局，然后进入到你开发的项目，npm link {包名}
|
 |
11
momo2278 Nov 2, 2021
克隆到对应版本的源码，然后 build 出来，一般 build 出来会有未压缩的版本，esm 最好，package.json 中的入口改为对应 build 出来的 js ，然后使用 npm link 过去，或者用 yarn workspace 构建一个工作区，就能调试到源码了，使用 IDE 自带的断点工具体验还能更好些
|
 |
12
zhea55 Nov 2, 2021
我寻思你这个第三方包，可以独立的跑起来，直接进入看不就得了吗
我试了一下。简单的方法。把它这个 treeview.js 文件全文复制到 chrome console ，回车。 然后你想怎么玩，就怎么玩。 |
Select Language