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 · 79 天前 · 1693 次点击
    这是一个创建于 79 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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


    然后你想怎么玩,就怎么玩。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1840 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:46 · PVG 00:46 · LAX 08:46 · JFK 11:46
    ♥ Do have faith in what you're doing.