又一个维护远古项目必备技能

chrome 断点调试深入学习

前言

嗯,和 xdebug 那个是同一个远古项目,没有前后端分离,jQuery + 模板引擎写的页面 , 被迫掌握了这个还不错的技能提升开发效率 (顺便还学习了一下浏览器DOM ,window 对象, JavaScript 引擎)

chrome 的 dev tool 根本是一个功能齐全的HTML/CSS/JS IDE , 比起 jetbrains 家的毫不逊色 , 之前前端写得少没去探索 Source 和 Lighthouse 面板 , 错过了这个神器 , 这回把我学到的新东西记录一下 , 然后有时间再把dev tool 的谷歌文档过一遍

常用断点方式

在这列出了一些常用的断点方式 , 一般不需要在Source页面手动找到要断点的代码，这样效率会很低下

  • 追踪某个按钮的 JS 代码 , DOMEventListener里勾选Mouse->Click事件

  • 追踪接口请求相关代码 , XHR断点也是第二常用的，毕竟大部分的操作都会有后端接口请求(XHR事件)

  • 有的时候不知道在哪里断点比较好，就把Script勾上，但是这样调试的范围会比较大,建议找到了目标位置后手动下断点,然后把勾取消, 也可以尝试在本页面script的开头加一个断点

  • 甚至可以在DOM上设断点，如果DOM修改了的话会触发断点

Event Listener 列表里还有许多事件类型都可以看看

这篇还行 , 断点的类型

不够的话上谷歌文档 , Chrome DevTools Doc

其他前端调试经验

由于该项目使用的php模板引擎开发前端页面，html和js在IDE里格式会乱掉，并且各种js比如jquery也不能正确映射(相对路径,一个页面由多个模板页面组合而成) ，导致写代码时没办法正确AutoComplete , 代码提示 ,

chrome浏览器的Source 提供了overrides的功能，可以让你将需要修改的文件覆盖远端的 , 直接在浏览器上修改 ， 这样能享受全面的js代码提示功能，并且修改后刷新速度也更快，下方也有对应的修改diff , 方便回写到项目代码中

avatar

开启的方式也很简单,在 overrides 页面随便选择一个本地的空文件夹 , 然后勾选 Enable overrides 后 , 回到 page 页面 , 右键你需要修改的文件 , save for overrides , 这样就可以在 chrome 的编辑器里修改并生效了!

avatar

不像 PHPStorm 之类的 ide 会在项目启动的时候生成各种代码提示的索引 , chrome 并没有这个功能, 但是我发现了另外一个折中的方案也可以做到很棒的代码提示 , 就是在你需要修改的代码处加上断点, 然后让页面运行到这个断点停下 , 这时候右边面板会有个 Watch 栏 , 在这里你就可以享受各种代码提示, Autocomplete , 并且检查当前上下文的各种可用方法,属性 , 非常的棒 !!

有了这个功能, 有时候连谷歌,查文档的步骤都省了 , 自己可能随便找找就找到了 , 比如我这回需要从父级(jQuery 的 dialog )获取 iframe 中的一个元素内容 , 毫无头绪 , 于是就在 watch 里探索了一番变量的各种属性, 很快就发现了从父级访问 iframe 中元素的踪迹

avatar

通过这种方式找到的另一个有用的方法(前端苦手,勿喷)

avatar

Scope 页面也包含了全局和局部的变量供查阅

avatar

有时候我们会想看看某个库的某个方法的实现源码,我也找到了一个方便的技巧 , 在 console 中输入 , 回车 , 点击下方出现的内容后 , 就可以跳转到源码实现位置

avatar avatar avatar

在我们调试js的时候，如果引用了一些js库，如jquery库的话，调试的时候，经常会跳到jquery库里面，那是各种循环，各种恶心，所以我们要进行一些设置。(下图是我新版chrome的设置，和旧版不太一样)

avatar

avatar

一般前端代码都会经过压缩 , source面板左下角可以格式化代码 avatar

关于类似 PHPStorm全局搜索定义的功能 , chrome 没有提供 , 可以用上面 console 的跳转方法 , 或 ctrl+shift+o 查找当前文件中的方法定义 avatar

体会

维护老代码有种侦探的感觉

旧代码的维护工作主要就依赖调试了 , 全新的页面和功能利用上 vue 渐进式的能力, 在页面单独引入, 借助MVVM 的数据驱动设计分离业务逻辑(数据)和视图 , 一步一步改进

其他参考资料

使用Chrome开发者工具overrides实现不同环境本地调试

Chrome浏览器的overrides的使用

小疑问

那个断点面板多出来的 Step 是什么功能?

They have changed the existing "step into" button so it will now step into async functions (such as setTimeout).

So this new "Step F9" button works in the same way as the old "step into" button used to work, whereby it will step over the async function and onto the next line.

This page from google has a nice animated GIF which visually explains the above

https://developers.google.com/web/updates/2018/01/devtools#async

https://stackoverflow.com/questions/51608073/new-debug-icon-step-f9-in-chrome-dev-tools