前端新人必看的开发技巧之浏览器控制台

最新推荐文章于 2026-01-15 09:56:25 发布

原创最新推荐文章于 2026-01-15 09:56:25 发布 · 3.2k 阅读

43 ·

本内容遵循CC 4.0 BY-SA版权协议

HTML/CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了前端开发中浏览器控制台的实用技巧，包括HTML调试、移动端模拟、CSS调试和Console调试。通过控制台，可以快速定位元素、修改HTML、查看属性来源、调试CSS值以及执行JavaScript代码，提升前端开发效率。对于前端新手，这些技巧是必不可少的工具。

该文章已生成可运行项目，

随便进入一个网页，按下F12，都将看到如下的控制台

在这里插入图片描述

一、HTML调试

你可以对HTML标签做任何操作，修改它，移动它，删除它
在这里插入图片描述

快速定位深层元素

在这里插入图片描述

HTML带来的启发

在网页上抓取想要的图片：
在这里插入图片描述

抓取背景图片

有些图片是在background-image中，那就需要在css栏中抓取：
在这里插入图片描述

二、移动端调试

在浏览器也能很好的模拟移动端的效果，可以切换不同的机型与大小
在这里插入图片描述

三、css调试

标签大小

可通过右下角的矩形图可以直观看出，当前标签的width、height、padding、margin、position的大小（如果有的话，否则属性是auto或-）
在这里插入图片描述

属性来源查看

当一个标签被多个类修饰，我们也能看出究竟那些熟悉生效了，特别是有熟悉冲突的时候
在这里插入图片描述

属性值调试

我们不一定要修改代码来改变css，可以直接在浏览器调试

例如定位元素，可以在浏览器端动态调整元素的位置，鼠标左键属性值后，出现悬浮块后，保持鼠标位置不动，滚动滚轮即可改变数值的大小待满意后再记住数值，再代码中修改
在这里插入图片描述

新增属性

当不确定是否要有某个css属性时，可以在这里增加调试，省去了css不合适又删掉的麻烦
在这里插入图片描述

注意：

在这里插入图片描述

快速定位css

特别是在复杂的场景，一个标签可能被十几个css类作用着。这样可以很方便找到生效的元素在哪个类中
在这里插入图片描述

五、 Console调试

控制台大多时候是输出console.log语句执行的代码

<body>
    <div id="app">
        <div class="child box">child</div>
    </div>
</body>
<script>
    console.log('hello,world')
    console.log(document.querySelector('#app'))
</script>

在这里插入图片描述
实际上console就是一个js执行器

如果有人问你怎么执行javascript代码?需要下载类似java的JVM或者c语言的gcc编译器吗？

你就告诉她，直接打开任何一个网页，按下F12，console里面直接可以执行，而且上下文是联系的，你输出一句它执行一句，浏览器会为每一条语句用console.log()包裹，所以console.log(let str1 = "hello")会输出undefined，但是语句确实是执行成功了
在这里插入图片描述
与HTML的联系：

<body>
    <div id="app">
        <div class="child box">child</div>
    </div>
    <script>
        //在控制台里执行，作用相当于新开一个script标签，然后在这里执行js代码
    </script>
</body>