1、BS架构系统的快速兴起

B/S（Browser/Serve）结构是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。

由于传统C/S（Client/Server）结构存在的种种问题，因此人们又在它原有的基础上提出了一种具有三层模式(3-Tier)的应用系统结构浏览器/服务器(Browser/Server)结构。

B/S结构是伴随着因特网的兴起，对C/S结构的一种改进。从本质上说，B/S结构也是一种C/S结构，它可看作是一种由传统的二层模式C/S结构发展而来的三层模式C/S结构在Web上应用的特例。

B/S结构主要是利用了不断成熟的Web浏览器技术，结合浏览器的多种脚本语言和ActiveX技术，用通用浏览器实现原来需要复杂专用软件才能实现的强大功能，同时节约了开发成本。

B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的电脑就能使用，客户端零安装、零维护。系统的扩展非常容易。

因此很多商用系统公司陆续从传统C/S架构软件向B/S转换。这就对系统的运维人员或测试人员要求了解或掌握浏览器开发者工具-F12。

2、如何调出开发者工具

在浏览器页面上： - 1> F12 键 (笔记本电脑 Fn + F12) - 2> 右键选择 检查(N) - 3> 快捷键 Ctrl + Shift + i

3、开发者工具初步介绍

开发者工具最常用的四个功能模块：

元素（ELements）、控制台（Console）、源代码（Sources、网络（Network）。

3.1、Elements（元素）

查看网页页面的所有元素，修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等等。

3.1.1、查看元素的代码

点击左上角的箭头图标（或按快捷键 Ctrl+Shift+C）进入选择元素模式，从页面中选择需要查看的元素，可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

查看元素的属性：定位到元素的源代码之后，可以从源代码中读出该元素的属性。

3.1.2、修改元素的代码与属性

点击元素，然后查看右键菜单，可以看到 chrome 提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择 Edit as HTML 选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。

「注意：」

这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

3.1.3、给元素添加断点

在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被 JS 代码修改）时，页面加载会暂停，然后可以查看该元素的属性。元素断点添加之后，可以在右侧栏的 DOM Breakpoints 页面中看到，这个页面可以看到当前网页的所有元素断点。

3.1.4、查看元素的监听事件

元素的右边栏的 Event Listener 页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的 JS 文件以及在该文件中的具体位置（行数）。

3.2、Console（控制台）

查看 JS 对象及其属性

3.2.1、执行 JS 语句

3.2.2、查看控制台日志

当网页的 JS 代码中使用了 console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。

在测试界面时，如果出现 Bug 问题，一般情况下会在这栏展示，查看调试日志信息或者异常错误信息，然后前端开发工程师根据具体问题来调试，进行解决问题。

3.3、Sources（源代码）

3.3.1、 查看源文件

在源代码（Source）页面可以查看到当前网页的所有源文件 包括：样式、css、图片、js 文件等。在左侧栏中可以看到源文件以树结构进行展示。

3.3.2、 添加断点

断点常用于调试JS源文件。在源代码左边有行号，点击对应行的行号，就给该行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择 Edit breakpoint 可以给该断点添加中断条件。

3.3.3、中断调试

添加断点后，当 JS 代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的值，也可以在右边的侧栏上查看。

在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

3.4、Network（网络）

4、实例：PASS嵌套调试

:fa-link: BS嵌套断点跟踪调试方法.docx