开发必备技可以之前端调试调试页面简洁
开发分为前端和后端。 一般企业对前端的需求不大，也不会聘请前端工程师。 一般都是后端工程师，久而久之就会成为全栈工程师。 全栈工程师必须具备调试前端和后端的能力，所以本文将简单介绍一下前端调试（浏览器调试）。
开发必备技能可以是前端调试工具/资料
浏览器（或其他浏览器）
开发必备技能可以前端调试调试页面简洁
打开浏览器调试的方式一般是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文件。 虽然抓包在调试中很少用到，但在出现请求地址、请求方式、数据编码等错误时也是必不可少的一环。
开发必备技能可以是前端调试
