开发工具之 ChromeElements改变元素伪类查看元素绑定的事件对元素打断点，监听属性和结构变化查看元素的属性和方

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

本文参考了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);
})();