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-02 07:00:31 +08:00 · 2920 次点击
    这是一个创建于 1106 天前的主题,其中的信息可能已经有所发展或是发生改变。

    楼主不太会,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-02 07:51:34 +08:00 via Android
    一般打包工具都有 dev 模式的,你试试 dev 模式
    rioshikelong121
        2
    rioshikelong121  
       2021-11-02 08:35:18 +08:00   ❤️ 1
    npm link
    zhw2590582
        3
    zhw2590582  
       2021-11-02 08:37:42 +08:00
    你可以把它的 github 整个源码放到你的目录,直接引入
    myl0204
        4
    myl0204  
       2021-11-02 08:44:02 +08:00
    开发模式下,我一般都是直接去 node_modules 中找源代码调试的
    yazoox
        5
    yazoox  
    OP
       2021-11-02 08:55:00 +08:00
    @myl0204 "我一般都是直接去 node_modules 中找源代码调试的"
    源代码我也知道在这里,可是我还是不知道如何调试。就是这一层”窗户纸“,会者不难,难者不会......

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

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


    然后你想怎么玩,就怎么玩。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1086 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:31 · PVG 03:31 · LAX 11:31 · JFK 14:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.