开发工具之 Chrome

人的一辈子，总有些东西比生命重要        ---  全民目睹

本文参考了Chrome 使用技巧

建议看下官方的资料，毕竟是一手资料，大体瞄了一下，干货挺多。

当我仔细研究了一下 Chrome 的功能，对 Google 粑粑的敬仰犹如滔滔江水绵延不绝。 能体会为啥有的人说浏览器只有 Chrome 一种了。接下来我将从开发使用的角度向你展示 Chrome 的黑科技。为了测试功能，页面写的太丑，见谅啊 😂😂😂

环境基于 MacOs 10.14.5 ,Chrome 75.0.3770.142

演示代码

Elements

改变元素伪类

div 背景颜色为红色，当鼠标移入背景变成黄色

查看元素绑定的事件

// 对 div 绑定了事件
const myDiv = document.querySelector("body > div");
myDiv.addEventListener('click', (ev) => {
    console.log('addEventListener-click');
});
myDiv.onclick = (ev) => {
    console.log('onclick');
}
复制代码

对元素打断点，监听属性和结构变化

div 绑定事件，点击会增长 div 的属性和追加 span，

查看元素的属性和方法

在 Chrome 编辑 Css,直接保存到 Css 文件中

还记得前段时间，在 Chrome 编辑好 Css 再 Copy 到 VsCode, 手动捂脸😂😂😂

经过在 Sources 添加本地文件夹，便可在 Elements/Styles 中编辑 Css 会保存到你对应的文件中

Sources

运行代码片断

Sources 中的代码片断运行，能够在任意见面生效

(()=>{
    const body=document.querySelector("body");
     const span = document.createElement('span');
    span.innerHTML = Math.random();
    body.append(span);
})();
复制代码

重写 css 和 js 来源

当你开发的已经部署到线上，若是须要修改，能够重写 css 和 js 来源，在本地修改好，再替换线上便可

断点调试及加入条件断点

有的时候咱们调试代码，须要根据条件来进行调试，如果在 for 循环，一步一步去调试真的会疯的

加入标记，执行到标记时，打印标记的变量

有的时候呢，代码执行的时候，咱们但愿打印某个变量，可是代码中没有 log ,再去改代码多费劲。加入标记，直接打印你想要的东西

查看 css 和 js 执行覆盖率

有的时候为了性能优化，咱们会将 css 和 js 拆分,能够经过 Chrome 进行分析

Network

查看页面加载访问你的资源及请求。

Application

Performance

Google 官方资料

看了官方的资料作的挺详细，Google 翻译下