请教一下，前端项目上，大家怎么调试引入的第三方的包的？

[yazoox]

楼主不太会，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 ，但是，好像没有啥用。

万分感谢！

[zjsxwc]

一般打包工具都有 dev 模式的，你试试 dev 模式

[rioshikelong121]

npm link

[zhw2590582]

你可以把它的 github 整个源码放到你的目录，直接引入

[myl0204]

开发模式下，我一般都是直接去 node_modules 中找源代码调试的

[yazoox]

@myl0204 "我一般都是直接去 node_modules 中找源代码调试的"
源代码我也知道在这里，可是我还是不知道如何调试。就是这一层”窗户纸“，会者不难，难者不会......

@zhw2590582 "github 整个源码放到你的目录，直接引入” 我现在是这么做的。但是 chrome 打开网站，devtools 里面，搜索源代码，就是找不到这个包的文件。是不是还需要去这个包的目录下面，添加 webpack.js 文件，设置一下打包方式，比如：mode: "development", devtool: "inline-source-map" 等等？

[HelloWorld556]

在 node_modules 中找到源码写入 debugger 可以么？

[lneoi]

node_modules 里面下来的就是你本地直接用的文件了，要修改可以直接修改，加个 log 就能看到效果

[zhw2590582]

我的话不需要这样，只要能引入源码，console.log 就能走天下，不需要花里胡哨的

[Biwood]

可以调试，首先你应该直接引用 src 里面的入口文件而不是 dist 目录，其次你要在所有 loader 配置里单独 include 这个模块（因为一般 loader 都是排除了一 node_modules 的），目的是开启 sourcemap ，简而言之就是把第三方包的源码当作你自己写的源码来用

[yunyuyuan]

npm build 你克隆的项目，然后 npm link 到全局，然后进入到你开发的项目，npm link {包名}

[fox2081]

克隆到对应版本的源码，然后 build 出来，一般 build 出来会有未压缩的版本，esm 最好，package.json 中的入口改为对应 build 出来的 js ，然后使用 npm link 过去，或者用 yarn workspace 构建一个工作区，就能调试到源码了，使用 IDE 自带的断点工具体验还能更好些

[zhea55]

我寻思你这个第三方包，可以独立的跑起来，直接进入看不就得了吗

我试了一下。简单的方法。把它这个 treeview.js 文件全文复制到 chrome console ，回车。


然后你想怎么玩，就怎么玩。