Chrome 调试技巧鼠标移入会变成红色。鼠标选中元素节点 <div class="one"></

技巧一

给元素节点添加 hover,active,focus,visited,focus-within 样式选中状态，在游览器端修改样式代码

看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover</title>
    <style>
        .input {
            outline: none;
        }
        .input:hover {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <input type="text" class="input">
</body>
</html>

页面渲染效果

鼠标移入会变成红色。

就可以在谷歌调试信息里面可以到样式了，且可以修改对应样式了

技巧二

控制台快速选中节点 $0 看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover</title>
    <style>
        .input {
            outline: none;
        }
        .input:hover {
            border: 2px solid red;
        }
        .one {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <input type="text" class="input">
</body>
</html>

页面渲染效果

鼠标选中元素节点 <div class="one"></div> 在控制条输出 $0，就是选中的对应的节点，可以对相应节点做相应的操作了。

技巧三

我们经常会维护别人的代码，代码写的很复杂也不好读，就是调试，打断点都不知道在哪里打。谷歌游览器调试就为我们提供了三种元素断点方法
看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover</title>
    <style>
        .input {
            outline: none;
        }
        .input:hover {
            border: 2px solid red;
        }
        .one {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="one" id="one"></div>
    <input type="text" class="input">

    <script>
        document.querySelector('#one').onclick = function() {
            this.remove();
        }
    </script>
</body>
</html>

页面渲染如图：

鼠标点击后，右键选择断点Break on 选中这三个，后者选中你需要的断点信息。上面左侧是触发的条件信息点击元素后就能正常进入断点了

技巧四

保存代码片段，我们有一些常用的代码片段经常使用，就可以存放到谷歌调试里面的代码片段中

看图说话：

技巧五

我们经常在谷歌游览器里面调试代码，但是别人的都是压缩的，简直无法看。看图说话：

无法查看代码这个时候你可以点击

技巧六

设置NewWork网络请求的速度，很多时候我们希望模拟网速很慢，去验证一些极端场景，这个设置就很有用

设置上传和下载的速度，单位是kb/s,还有名称

技巧七

我们经常在调试代码的生活，会打上断点，我们可以利用谷歌游览器调试信息里面的 Source 里面的js文件行数前面打上断点，如：在第3行打算了一个断点，但是我们这个时候，想进入 fn2 方法再打一个断点。我们可以找到 fn2 定义的位置，再用上面的方法，打上断点。但是如果文件很多，也不知道 fn2 定义在上面地方的生活呢？相对就比较麻烦了。这时，我们可以用谷歌控制台提供的 debug 方法，在 Console 控制台，输入 debug(fn2) ,就会自动在 fn2 方法第一行打上一个断点，F8执行后就会进入 fn2 方法里面的断点。写到这是不是有人会有疑惑，这个可以用这个进入方法内部啊，这个 debug 是不是显得很鸡肋。俗话说：存在即合理。比如出现如下情况：你用 F11 进入方法体，发现进入的是 getData 里面了。所以这个时候 debug(fn2) 就很有用了。

技巧八

$_ 可以拿到 Console 控制台最后一次的值。看图：

技巧九

在控制台调试信息的生活，我们想查看调用栈情况，可以看谷歌调试器里面的这个面板断点在这个位置的时候，查看调用栈的情况。但是有时候，我们想查看的调用栈信息在一个 for 循环里面，想看调用栈的每次执行的情况，这个查看调用栈的方式就不是太友好，而console.trace 方法就派上用场了，console.trace 参数传入想看调用栈的方法或属性，会在控制台输出每次的调用栈信息。开发者就能很友好的看到每次的调用栈信息做对比。

技巧十

我们在调试的时候，获取到某一个dom，但想快速定位到 dom 在 html 中的位置呢？可以用谷歌提供的 inspect 方法，传入获取到的 dom 元素，执行后就能定位到 dom 所在Element 中的位置。inspect也可以传入一个方法，如：回车执行，就能跳转到fn2定义的位置。