前端开发工具DevTools的详细知识点总结（三）之js调试

最新推荐文章于 2026-04-12 09:39:33 发布

原创

最新推荐文章于 2026-04-12 09:39:33 发布 · 3.1k 阅读

标签

#js #javascript

本文详细介绍Chrome DevTools的source面板功能，包括代码编辑、CSS和JavaScript修改、文件浏览、Snippets保存及JavaScript调试技巧。掌握这些工具，有助于提高前端开发效率。

文章目录

source面板
结语

source面板

在前面的博客里讲述过Element面板以及Console面板，这两块面板都是很重要也是经常使用到的面板，而今天所要讲述的source面板的重要性和实用性不亚于它俩。
首先，打开source面板：（F12->跳转source）

在这里插入图片描述
乍一看，此source面板分有三部分，接下来我们逐一进行讲述。

代码编辑器

在这里插入图片描述
此部分面板即为代码编辑器，此部分用于显示指定文件的源代码。
此版块是一定会显示，但是此板块无法单独执行操作，需要与其左边的板块或者右边的板块结合使用来完成自己想要实现的操作。
此板块左上角和右上角有一对对称的按钮，它俩的功能分别是显示/隐藏左/右板块。
在这里插入图片描述

此面板左下方有一个{}按钮，它的作用是让缩小后的文件恢复其可读性。
如下图所示：

这样一个源代码文件，代码非常密集，可读性非常差，点击{}按钮。

新生成一个formatted的文件，其代码风格的可读性焕然一新。

编辑 CSS 和 JavaScript

代码编辑器支持代码的修改编辑，其中CSS 更改操作会立即生效，且不需要保存。JavaScript 更改操作不会立即生效，需要Control+S保存后修改然后根据修改的地方进行对应的重运行方可生效。
注意：此操作只能修正在浏览器中运行的代码，不能真正修正代码此页面的代码，刷新页面就会一朝回到解放前，所以得记得及时修正自己服务器上的代码。