开发分为前端和后端。 一般企业对前端的需求不大，也不会聘请前端工程师。 一般都是后端工程师，久而久之就会成为全栈工程师。 全栈工程师必须具备调试前端和后端的能力，所以本文将简单介绍一下前端调试（浏览器调试）。

开发必备技能可以是前端调试工具/资料

浏览器（或其他浏览器）

开发必备技能可以前端调试调试页面简洁

打开浏览器调试的方式一般是F12这样，也可以在设置中找到开发者工具。 不同的浏览器有不同的打开方式。 图为浏览器

在调试页面，上面有很多功能，包括 、 、 等，这四个功能是常用的，第四个功能你可能不会用。 下面我们详细介绍一下这四个功能。

开发必备技能可前端调试接口

该标签页的主要功能与HTML和CSS相关。 也可以说是用来调试HTML和CSS的。 我图中的分布图左边是页面的源码，右边是对应的css源码，底部是控制台（可以忽略）

使用方法是利用调试页面左上角的箭头大致定位到想要查看的元素百思特网，然后利用自己的专业知识找到具体的元素。 对于部分手机页面，可以直接切换到手机页面，然后进行调试。

如果是修改HTML，那么你可以右键点击HTML源代码，根据自己的需要选择功能。 最常用的是前四种。 当然，快捷方式就是直接双击你选择的HTML代码直接修改即可。

如果是修改CSS，使用小箭头定位元素，在右侧的css区域找到该元素的样式。 注意：一个元素可能包含多种样式，重叠关系过多； 更改后，页面会刷新并消失。 （该图是使用css改变一个标签的字体颜色）

补充一点： 1、可以在HTML页面上进行Ctrl+F搜索。 如果你知道某些元素的ID，就可以直接定位它们。 2. 在搜索框上方，这一行标签百思特网显示了当前标签的位置。 一般可以用来修改css，但也是可选的。 它主要告诉你元素的路径。

开发必备技能可前端调试接口

该页面主要用于调试js代码，也可以用来编写js代码。 一般可以用来绕过网页的验证，页面加载过程中出现的信息提示都会在这里，前端错误报告也在这里。 这里。

抱歉，上面截图中的说法可能有点不准确，输出的方式有很多种。 log只是比较常用的一种。 演示控制台代码的编写，如图打印九九乘法表。

另外就是看一些调试信息，主要是和next函数配合使用。

开发必备技能可前端调试接口

标签页左侧主要显示网站已加载的文件，以及网站的总体结构。 百思特网部分配置文件和未加载的配置文件无法显示。 中间是当前打开的文件，右侧是调试面板。 （根据我的截图，不同浏览器可能会有一些差异）

调试之前，先打断点，然后熟悉一下调试面板中的一些调试按钮，下一步，跳入，跳出等，这样的做法你就会有感觉了（和其他语言的调试类似）。 让代码停在指定位置，然后调试代码功能，并及时修改变量的结果。常用方法：标记断点：在打开的JS文件前面点击F8：转到下一个断点 F10：执行语句by语句，分号是语句，不进入方法体 F11：进入方法体 shift+F11：跳出方法体

结合一个小案例来了解调试方法，使用控制台修改js中变量的值。 修改之前，我的变量是一个数组，直接使用控制台修改为1。代码修改后，只要页面不刷新就有效。 下次使用时为 1。

开发必备技能可前端调试接口

调试时使用Tab页的概率超低，用于抓包分析数据。 该页面从上到下包含工具栏、时间线和发送的请求。

不可见的文件，一般可以在这里看到，比如json文件。 虽然抓包在调试中很少用到，但在出现请求地址、请求方式、数据编码等错误时也是必不可少的一环。

开发必备技能可以是前端调试