VOLANTIS 2.6.6

解锁chrome调试黑科技

chrome调试骚操作

  • 通用篇(Windows)

  1. 切换DevTools窗口的布局（下右）

    Ctrl + Shift + D

  2. 切换DevTools选项卡 (Element-NetWork-Audits)

    Ctrl + [ 或 ]： 向左和向右

    Ctrl + 1 到 9：DevTools>Settings>Preferences>Appearance中打开 (开启之后，浏览器网页选项卡也可以切换)

  3. Styles数值调整

    1. Alt +上下箭头 0.1
    2. 上下箭头 1
    3. Shfit+上下箭头 10
    4. Ctrl +上下箭头 100

  4. elements，logs， sources & network 皆可使用 Ctrl+F

    img

  1. Element中的HTML可以直接Ctrl+C保存

  2. copy(全局对象或者DOM or 一些太长的对象)，可直接复制到编辑器中查看。

    1
    2
    3
    4
    5
    6
    7
    8
    // console板块
    window 

    ....blabllabla

    copy(window)

    Ctrl+V

  3. debugger

    1. 越过下一个函数调用 : F10、Ctrl + ‘ ;
    2. 进入下一个函数调用 : F11、Ctrl + ;
    3. 跳出当前函数 : Shift + F11、Ctrl + Shift + ;
    4. 切换断点条件: 点击行号、Ctrl + B;

只列举出来我认为很常用的，详见： https://developers.google.com/web/tools/chrome-devtools/shortcuts

  • Command篇

打开devtools, [Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] ) ,会进入这样的界面。

img

截屏方式

没错，有好几种截屏的方式，但微信截图他不香吗？

不不不，第三方工具只能截满你的屏幕尺寸大小，比如：web长度大于1080，而你要看到所有的element?

选择上图中的： full size 即可。 长图示例预警:

img

切换主题

当你在晚上工作，讨厌白闪闪的devtools,Commond输入： theme。

里面还有很多很多功能~ 模块如下：

img

  • Snippets

    位于Sources模块的，很常用的除了page来看一些err和源码。还有一个snippets也很实用。

    1.新建代码块

    img

2.执行(!+代码块序号)

img

这样就可以输出对应代码块的结果啦。 可以理解为给你开了个沙箱，所以你可以引入其他来源代码块来执行。

测试证明，清cookie ，清缓存，关闭浏览器都不会导致snippets丢失，而且是跨域名全局可用，应该是强存储于浏览器上的 。有点硬~

Date: 2020/2/28

  • Console模块篇

    $符号

    1.调试的过程中，你经常会通过打印查看一些变量的值，但如果你想看一下上次执行的结果呢？再输一遍表达式吗？

    这时候 $_ 就派上了用场，$_ 是对上次执行的结果的 引用 ：

    img

  1. $ 变量在 console 中就是对这一大串函数 document.querySelector 的别名。

    $$变量执行 document.QuerySelectorAll 并且它返回的是：一个节点的 数组 ，而不是一个 Node list

    例如：Array.from(document.querySelectorAll('div')) === $$('div') 。

    查找Node可比对着Element看强太多啦！

img

结合起来就有一个很妙的css调试法~

1
2
// Console输入！
$$('*').forEach(item=>{item.style.outline='1px solid red'})

效果如下：

custom formatter 自定义格式转换器

我们习惯使用 DevTools 的 console 默认对 object 的转换(例如上图)，但有时候我们想用与众不同的方式来处理。 那我们就可以自定义输出对象的函数 custom formatter~

具体的官网介绍在这里： https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview

开启方法：打开devtools,按下F1。勾选如下~

Custom formatters checkbox in Chrome

formatter： 它是一个对象，包含三个方法：

  • header : 处理如何展示在 console 的日志中的主要部分。
  • hasbody : 如果你想显示一个用来展开对象的 ▶ 箭头，返回 true
  • body : 定义将会被显示在展开部分的内容中。
1
2
3
4
5
6
7
8
window.devtoolsFormatters = [{
    header: function(obj){
        return ["div", {}, obj.toString()]
    },
    hasBody: function(){
        return false;
    }
}]

其中header 方法返回了一个 JsonML (注： JsonML : JSON Markup Language - JSON 标记语言) 数组，由这些组成：

  1. 标签名
  2. 属性对象
  3. 内容 (文本值或者其他元素)

让我们看看发生了什么：

img

amazing

现有好几种 custom formatter 可供选择，例如：你可以在这个 immutable-devtools 仓库中找到对于 Immutable.js 结构的完美展示。但你同样可以自己造一个。

如果你遇到结构不寻常的对象时，或大量的日志(最好避免这样的情况，但是有时候很有用)而你想从中做区分时，你可以采用 custom formatter 来处理。

一个很实用的窍门：直接将你不关心，不需要区别对待的对象过滤出来，直接在 header 方法里面 return null。让 DevTools 使用默认的格式化方式来处理这些值。

让我们来找点乐子，让开让开，我要装逼啦！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
window.devtoolsFormatters = [{
    header: function(obj){
      if (!obj.__clown) {
        return null;
      }
      delete obj.__clown;
      const style = `
        color: red;
        border: dotted 2px gray;
        border-radius: 4px;
        padding: 5px;
      `;
      const content = `🤡 ${JSON.stringify(obj, null, 2)}`;

      try {
        return ['div', {style}, content]
      } catch (err) { // for circular structures
        return null;  // use the default formatter
      }
    },
    hasBody: function(){
        return false;
    }
}]

console.clown = function (obj) {
  console.log({...obj, __clown: true});
}

console.log({message: 'hello!'});   // normal log
console.clown({message: 'hello!'}); // a silly log

img

可以在massage里面加入一个emoji表情。当然，**他的实际作用是tag，可以通过不同的tag来表示不同的项目，便于区分~

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://tsunamigg.github.io/2020/05/28/Chrome-debugging-ways/

评论