Google浏览器（或其他浏览器）
浏览器调试开启的方式，一般都喜欢F12，也可以在设置中找开发者工具，不同的浏览器，打开的入口不一样，如图为Google浏览器
该Tab页的主要功能是跟HTML和css有关，也可以说是来调试HTML和css的，在我的图片中的分布，左边为页面的源码，右边为对应的css源码，底部为控制台（可以忽略）
使用方法就是使用调试页面左上角的箭头，去大致定位你要查看的元素，然后再利用你的专业知识，去具体找到某元素。对于一些手机页面，可以直接切换成手机页面，然后进行调试。
假如是修改HTML，那么你就在HTML源码处右击，根据自己的需求选择功能，常用的就是前面四个，当然快捷方式就是直接双击你选择的HTML代码，可以直接修改。
假如是修改CSS，利用小箭头定位元素后，在右边的css区域找到该元素的样式，注意：一个元素可能包含很多样式，存在太多的覆盖关系；而且更改之后，页面刷新一下就没有了。（图片是利用css将某一标签的字体换个颜色）
补充一点：1、在HTML页面可以进行Ctrl+F查找，假如你知道某些元素的ID，可以直接进行定位。2、在查找框上面，这一排标签，显示的是当前标签的位置，一般可以拿去修改css，但是也是选择性的，主要是告诉你元素的路径。
该页面主要是进行js代码的调试，也可以用来写js代码，一般绕过网页的验证什么的也可以通过它实现，以及页面在加载过程中出现的信息提示都会在这里，前端报错也在这里。
抱歉，上述截图的说法可能有点不准确，输出的方式有很多console.log只是使用比较多的一种。演示一下控制台代码的编写，如图打印九九乘法表。
其他就是看一些调试信息，主要是结合下一个功能使用的。
该tab页，左侧主要是显示网站已经加载到的文件，以及网站的大致结构，对于一些配置文件和未加载的是无法显示的。中间是当前打开的文件，右侧是调试面板。（跟据我的截图，不同浏览器可能有些差异）
调试之前，首先会标记断点，其次要先熟悉调试面板内的一些调试按钮，下一步，跳进，跳出等，这个多练习就会有感觉（跟其他语言的调试类似）。让代码在指定位置停下，然后调试代码功能，和及时修改变量的结果。常用方法：标记断点：在打开的JS文件前面单击F8：到下一断点F10：一句一句执行，一个分号为一句，不进方法内F11：进入方法体内shift+F11：跳出方法体
结合小案例了解一下这个调试的玩法，利用控制台修改js中变量的值，未修改前我的变量是一个数组，直接利用控制台修改为1，代码修改后只要不刷新页面，就是有效的，下次使用它就是1。
该Tab页在调试时使用的概率是超级低的，都是用来抓包使用的，对数据进行分析，该页面从上往下工具栏，时间轴和发送的请求。
在sources看不见的文件，一般在这里可以看见，比如json文件。抓包虽说在调试中用得少，但是也是不可缺少的部分，万一请求地址、请求方式，数据编码等错误。
每个浏览器的调试都大同小异，不过基本功能都有
经验编写不易，希望投上你宝贵的一票