Chrome Dev Tools

• 各个面板的功能介绍
• Css debug 和 js debug
• 一些小技巧
• ...

1 各个Tab介绍

1.1 打开Dev Tool

• 菜单>更多工具>开发者工具
• 快捷键：F12

1.2 打开命令菜单

• 快捷键：
• CTRL + SHIFT + P
• Command + SHIFT + P(MAC)

• DevTool的黑色主题

• screenshot

full shot

screenshot node

• dock

1.2 常用的Tab

• Element
• Console
• Source
• Network
• Vue/React

2 Css 调试

2.1 检查元素

• “检查我”

2.2 查询DOM树

• 快捷键:

• CTRL+F

• Command+F(MAC)

• 查询方式：

• 文本查询

  

• css选择器

  

• Xpath

  

2.3 Console

• inspect(element)

3 编辑样式

• 用auto-complete特性给元素添加样式

• 让:hover常驻悬停！

• 编辑class

• 别动我

• 改我改我~

• 别动我

  

• 复制样式

Computed的面板是不按照class区分的, 只是把所有样式列出来了.

可以快速定位

group功能上的区分.

Layout是前端页面经常用到的布局, 一个是Grid布局(网格布局), 另一个是Flexbox(弹性布局). 这个布局, 把我们所有用到grid布局, flexbox布局的容器全部列在这里了.

• DevTool的黑色主题

• 截屏

4 控制台（Console）

• 快捷键

• Ctrl+Shift+J

• Command+Option+J(MAC)

• 执行语句

• $_ 上一条语句

• $0 上一个选择的DOM节点（$1, $2...）

• console.log (error warn table clear group time assert trace)

• Log级别筛选

5 Javascript 调试

        window.addEventListener('load', () => {
            document.getElementById("change-color-btn").addEventListener("click", function () {
                function rgb() {
                    const value = () => Math.floor(Math.random() * 255);

                    //debugger;
                    const irrelevantFunction = () => {
                        let someStr = '';
                        for (let i = 0; i < 10; i++) {
                            someStr += i;
                        }
                        return someStr;
                    }

                    irrelevantFunction();

                    const r = value();
                    const g = value();
                    const b = value();

                    return { r, g, b };
                }

                const color = rgb();

                this.style.color = `rgb(${color.r}, ${color.g}, ${color.b})`;
            });
        })

subtree modifications: 以这个为根节点, 它里面的一些子节点被修改的话, 那么js的运行就会暂停

attribute modifications: 一些属性被修改了, 也会暂停

node removal: 从文档里这个节点被删除的话, 代码执行也会被暂停.

去掉debugger

不需要调试vue.js

6 Network

发送请求

点击变灰, 不再监听网络发起的请求, 点击不会有反应.

第二个是clear, 清空

Preserve log: 历史的也保留

Throttling: 截流器, 模拟用户网络状态

Reference

https://www.bilibili.com/video/BV1KM4y1G7EF/?spm_id_from=333.337.search-card.all.click&vd_source=73e7d2c4251a7c9000b22d21b70f5635