急速 debug 实战二(浏览器 | 您所在的位置:网站首页 › 浏览器调试js代码怎么调 › 急速 debug 实战二(浏览器 |
本教程共三篇。 1.急速 debug 实战一 (浏览器 - 基础篇) 2.急速 debug 实战二 (浏览器 - 线上篇) 3.急速 debug 实战三 (Node - webpack插件,babel插件,vue源码篇) 通过前一篇的介绍,我们已经懂得基本的 debug 技巧,那么我们如何快速调试一些线上的问题呢。本文将线上的调试分为以下三种:(当然有更好的调试方式,可以在评论区提出) 线上即时修改;针对一些样式以及一些 js 已经知道问题所在快速地修改以达到解决 bug 的模式。代理到本地代码; 这种情况可以解决线上代码与本地不一致,也可以非常方便地在源码插入代码立即调试线上不存在 sourceMap 启用本地sourceMap; 有时候一些问题乍一眼看不出是什么问题,但是线上又不提供 sourceMap 所以我们可以启动本地的 sourceMap 来帮助我们定位问题。所以示例在以下环境通过。 操作系统: MacOS 10.13.4 Chrome: 版本 72.0.3626.81(正式版本) (64 位) 线上即时修改打开功能在调试线上问题的时候,我们会遇到这样的问题,例如: 我需要在页面上直接修改样式快速地定位问题,可能是某些样式不兼容,导致渲染不成功。但是每当我们再 devTools 上修改完,我们想重新刷新页面。这个时候我们修改的东西都不见了。下面我介绍的这个功能就是能够让我们更好地调试线上问题,并且保持状态。 chrome devTools 有一个名叫 Overrides 的功能。这个功能对于我们线上调试有着极大的帮助 打开: http://yifenghua.win/example/debugger/demo3.html通过按 Command+Option+I(Mac) 或 Control+Shift+I(Windows、Linux),打开 DevTools。 此快捷方式可打开 Console 面板。点击 source 按钮点击箭头所示按钮,找到 Overrides, 选中。点击 Select folders for Overrides。选择一个本地的空文件夹目录。跳出授权,点击允许 开始这是我们刚才的页面 假设我们设计稿需要我们将背景色改成红色,并且字体大小改成22px。我们来进行修改。修改完成后刷新页面。打开后发现是这样的。 继续点击 source 标签。点击 Page 按钮。 打开我们demo3.html,将head中的 title 改成 debug03,并且保存(mac: command + s, windows: ctrl + s)。 再次刷新页面,发现我们的页面 title 已经成功被修改了。 最后,我们点击 source Page 中的 demo3.js。将 card.text='123';修改成 card.text='hello';,继续保存。 好了。我们已经完成了我们所有的修改了。 可以发现我们所有的文件下面都有一个小蓝点。这个就是修改后的文件储存在一开始选择的文件夹中。 查看 diff那么如何查看我们之前修改了哪些内容呢?继续打开 devTools ,点击右上角的三个小点 -> More tools -> Changes 可以看到我们刚才的所有修改啦。 到此我们已经完成了 Overrides 调试线上的方法了。 代理到本地代码首先需要下载 charles 其他的代理工具也可以,只要能将请求代理到本地的工具都可以,这里我就用我熟悉的 charles 展示。 那么这种方式主要能调试线上的什么问题呢? 快速确认本地版本与线上是否一致。如果本地文件没有问题,线上有问题,那么重新打包一次即可。(如果有版本号请忽略)调试代码。调试代码下面来演示一下,如何调试线上的代码。假设以上是我们本地的项目。所以为了演示,你需要做以下几个步骤。 代码语言:javascript复制git clone https://github.com/hua1995116/debug.git cd debug cd charles-debug npm install npx webpack --watch --progress (npm >= v5.2.0)然后在我们的 dist 目录下会生成我们打包后的 js 打开: http://yifenghua.win/example/debugger/demo4.html打开 devTools 的 netWork 查看 js 路径。 http://yifenghua.win/example/debugger/demo3.js打开我们的 charles (嗯,如何配置和使用我不进行讲解,自行百度和 Google 吧)点击 Tools 中的 Map Local 进行配置 。Add 一个规则将刚才 netWork 中的 url 映射到本地地址(即刚才我们 clone 项目的位置),如图所示对我们本地内容进行改动。改成如下所示代码语言:javascript复制const card = document.querySelector('.card-link'); card.onclick = function() { card.text = '你好'; }再次打开我们的页面 http://yifenghua.win/example/debugger/demo4.html查看 charles 日志可以看到已经成功将文件映射到本地。这样,我们就可以实时地调试我们的线上的文件啦。你可以插入各种标志点以及 debugger。 线上不存在 sourceMap 启用本地sourceMap嗯,除此之外,我们还可以通过 charles 添加 sourceMap。 修改我们刚才 clone 的项目,修改 webpack.config.js 和 index.js webpack.config.js 代码语言:javascript复制module.exports = { entry: './index.js', output: { filename:'demo3.js' }, devtool: 'source-map', };index.js 代码语言:javascript复制const card = document.querySelector('.card-link'); card.onclick = function() { console.log(ss); card.text = '你好'; }代码语言:javascript复制运行 npx webpack --watch --progress 给 charles 再增加一个 Map Local 现在打开 http://yifenghua.win/example/debugger/demo4.html 点击 Card link,发现报错。 点击 index.js ,可以看到我们的能直接定位到源码啦。 总结有了以上三种方式调试线上代码。应该说可以定位到绝大多数数问题了。如果大家有什么更好的方式可以留言,一起学习下,嗯,真香。 (溜了溜了 更多请关注友情链接: https://huayifeng.top/ 长按二维码,可以关注我哟 万水千山总是情,点个小赞行不行 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |