楼主不太会,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 2021-11-02 07:51:34 +08:00 via Android
一般打包工具都有 dev 模式的,你试试 dev 模式
|
2
rioshikelong121 2021-11-02 08:35:18 +08:00 1
npm link
|
3
zhw2590582 2021-11-02 08:37:42 +08:00
你可以把它的 github 整个源码放到你的目录,直接引入
|
4
myl0204 2021-11-02 08:44:02 +08:00
开发模式下,我一般都是直接去 node_modules 中找源代码调试的
|
5
yazoox OP @myl0204 "我一般都是直接去 node_modules 中找源代码调试的"
源代码我也知道在这里,可是我还是不知道如何调试。就是这一层”窗户纸“,会者不难,难者不会...... @zhw2590582 "github 整个源码放到你的目录,直接引入” 我现在是这么做的。但是 chrome 打开网站,devtools 里面,搜索源代码,就是找不到这个包的文件。是不是还需要去这个包的目录下面,添加 webpack.js 文件,设置一下打包方式,比如:mode: "development", devtool: "inline-source-map" 等等? |
6
HelloWorld556 2021-11-02 08:57:59 +08:00
在 node_modules 中找到源码写入 debugger 可以么?
|
7
lneoi 2021-11-02 09:08:21 +08:00
node_modules 里面下来的就是你本地直接用的文件了,要修改可以直接修改,加个 log 就能看到效果
|
8
zhw2590582 2021-11-02 09:12:41 +08:00
我的话不需要这样,只要能引入源码,console.log 就能走天下,不需要花里胡哨的
|
9
Biwood 2021-11-02 09:30:46 +08:00 via iPhone
可以调试,首先你应该直接引用 src 里面的入口文件而不是 dist 目录,其次你要在所有 loader 配置里单独 include 这个模块(因为一般 loader 都是排除了一 node_modules 的),目的是开启 sourcemap ,简而言之就是把第三方包的源码当作你自己写的源码来用
|
10
yunyuyuan 2021-11-02 09:33:06 +08:00
npm build 你克隆的项目,然后 npm link 到全局,然后进入到你开发的项目,npm link {包名}
|
11
fox2081 2021-11-02 10:16:29 +08:00
克隆到对应版本的源码,然后 build 出来,一般 build 出来会有未压缩的版本,esm 最好,package.json 中的入口改为对应 build 出来的 js ,然后使用 npm link 过去,或者用 yarn workspace 构建一个工作区,就能调试到源码了,使用 IDE 自带的断点工具体验还能更好些
|
12
zhea55 2021-11-02 11:12:55 +08:00
我寻思你这个第三方包,可以独立的跑起来,直接进入看不就得了吗
我试了一下。简单的方法。把它这个 treeview.js 文件全文复制到 chrome console ,回车。 然后你想怎么玩,就怎么玩。 |