开发者工具，可谓是浏览器的神器。本节课我们就来学习一下开发工具的各类栏目介绍。1.总览总览打开浏览器，使用F12打开开发者工具，如下图：图中右侧圈红的部分，就是开发者工具。开发者工具的位置可以自由定义，点击红框右上角×左边的三个点，可选右侧悬停、左侧悬停、底部悬停，以及独立窗口。1开发者工具有很多个栏目，这里来重点介绍一下我们常用的栏。2.Elements标签栏标签栏标签栏中展示的内容，就是浏览器加载网页并渲染之后的页面，从这个标签栏中，可以看到完整的HTML内容，如下图：2标签栏的内容，也就是绿色框框中的部分，是可以展开和收缩的，方便查找标签。并且在鼠标悬停到某个div标签的时候，左侧的网页对应的元素也会被标记上特定颜色。图中底部的红色框，是搜索框，按Ctrl+F可以弹出搜索框。搜索框支持字符串搜索、Selector选择器搜索、Xpath语法搜索，非常强大。图中顶部中间，有个黄色的框，这里有两个小窗口，右侧的是响应式页面布局查看，一般是前端使用的查看页面的分布式响应。黄色框左边的图标，一个箭头+一个正方形框，是选择器，单击选择器然后选择网页的显示效果，例如登录，绿色框中会自动的切换至对应的标签代码。如下图：33.Console控制栏控制栏控制栏就是JS的代码调试窗口，这里可以调试JS代码、操作HTML这个完整的DOM文件结构。首先打开控制端，如下：4通常错误越少，终端的内容越少，反之增多。当前截图就是404，找不到一个bootstrap的map文件。在你测试其他网站的时候，通常会一些招聘前端的信息和链接，例如百度和知乎，你都可以看到招聘信息。>是输入提示，你可以在这输入js代码，例如简单的计算1+1，结果是2。还有一个就是我们上节课的JS函数代码，逻辑是取出密码的明文、加密明文、密文赋值等，因为都是JS代码的控制，所以这里也可以实现操作。如下图：54.Sources栏栏Sources这一栏可谓非常的强大。Console栏是分析和测试JS代码用的，Sources这栏是针对JS代码和文件分析调试栏。先上图：6图中有个三个红框，从左到右，分别是文件架构的菜单栏、文件展示栏、调试栏。文件架构是基于文件的加载网址的，图中有shanzhi.spbeen.com的login和static目录，里面还有css和js目录。还有一层是audio-devices.html，这个是chrome自带的，音频设备管理文件。具体每个目录中都有哪些，前面我们在network栏都看到了所有的记录，大家可以自己打开Chrome然后翻一翻。中间的红框，是代码阅读，通常都是在这里阅读JS文件的代码...
