DevTool debug tips

Posted by Yuankun Li on 2022-05-13

Chrome devtool - Overrides 覆盖线上代码

开发者模式,用本地 js 替换线上js调试过程
Sources --> Overrides
Sources–> Page里面找到咱们要调试的代码文件,然后右键点击 Save for overrides

Emulate a focused page in DevTools to debug overlay elements

当焦点丢失时,一些覆盖元素(如下拉菜单或弹出菜单)会自动隐藏/删除。 每当您切换到 DevTools 时,页面不再聚焦并且元素被隐藏。

Some overlay elements like dropdowns or flyout menus automatically hide/remove themselves when the focus is lost. Whenever you switch to the DevTools the page is not focused anymore and the element gets hidden.

为了解决这个问题,我们可以使用Chrome DevTools的Emulate a focused page功能来模拟focus到page的状态,这样覆盖元素(如下拉菜单或弹出菜单)就不会被自动隐藏了。

  • The Chrome DevTools have a feature to emulate page focus. Open the DevTools, press Ctrl+Shift+P (or Cmd+Shift+P on macOS) and search for “Emulate a focused page”.

  • A checkbox in Rendering panel


show git comment