请教一下,前端项目上,大家怎么调试引入的第三方的包的? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a Javascript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
Javascript 权威指南第 5 版
Closure: The Definitive Guide
yazoox
V2EX    Javascript

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

  •  
  •   yazoox 2021 年 11 月 2 日 3450 次点击
    这是一个创建于 1575 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    万分感谢!

    12 条回复    2021-11-02 11:12:55 +08:00
    zjsxwc
        1
    zjsxwc  
       2021 年 11 月 2 日 via Android
    一般打包工具都有 dev 模式的,你试试 dev 模式
    rioshikelong121
        2
    rioshikelong121  
       2021 年 11 月 2 日   1
    npm link
    zhw2590582
        3
    zhw2590582  
       2021 年 11 月 2 日
    你可以把它的 github 整个源码放到你的目录,直接引入
    myl0204
        4
    myl0204  
       2021 年 11 月 2 日
    开发模式下,我一般都是直接去 node_modules 中找源代码调试的
    yazoox
        5
    yazoox  
    OP
       2021 年 11 月 2 日
    @myl0204 "我一般都是直接去 node_modules 中找源代码调试的"
    源代码我也知道在这里,可是我还是不知道如何调试。就是这一层”窗户纸,会者不难,难者不会......

    @zhw2590582 "github 整个源码放到你的目录,直接引入” 我现在是这么做的。但是 chrome 打开网站,devtools 里面,搜索源代码,就是找不到这个包的文件。是不是还需要去这个包的目录下面,添加 webpack.js 文件,设置一下打包方式,比如:mode: "development", devtool: "inline-source-map" 等等?
    HelloWorld556
        6
    HelloWorld556  
       2021 年 11 月 2 日
    在 node_modules 中找到源码写入 debugger 可以么?
    lneoi
        7
    lneoi  
       2021 年 11 月 2 日
    node_modules 里面下来的就是你本地直接用的文件了,要修改可以直接修改,加个 log 就能看到效果
    zhw2590582
        8
    zhw2590582  
       2021 年 11 月 2 日
    我的话不需要这样,只要能引入源码,console.log 就能走天下,不需要花里胡哨的
    Biwood
        9
    Biwood  
       2021 年 11 月 2 日 via iPhone
    可以调试,首先你应该直接引用 src 里面的入口文件而不是 dist 目录,其次你要在所有 loader 配置里单独 include 这个模块(因为一般 loader 都是排除了一 node_modules 的),目的是开启 sourcemap ,简而言之就是把第三方包的源码当作你自己写的源码来用
    yunyuyuan
        10
    yunyuyuan  
       2021 年 11 月 2 日
    npm build 你克隆的项目,然后 npm link 到全局,然后进入到你开发的项目,npm link {包名}
    momo2278
        11
    momo2278  
       2021 年 11 月 2 日
    克隆到对应版本的源码,然后 build 出来,一般 build 出来会有未压缩的版本,esm 最好,package.json 中的入口改为对应 build 出来的 js ,然后使用 npm link 过去,或者用 yarn workspace 构建一个工作区,就能调试到源码了,使用 IDE 自带的断点工具体验还能更好些
    zhea55
        12
    zhea55  
       2021 年 11 月 2 日
    我寻思你这个第三方包,可以独立的跑起来,直接进入看不就得了吗

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


    然后你想怎么玩,就怎么玩。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     4737 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 46ms UTC 06:07 PVG 14:07 LAX 22:07 JFK 01:07
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86