下载文档原格式
Chrome——F12⾕歌开发者⼯具详解我们这⾥介绍主要的⼏块：、、Console⼤家都有⽤过各种类型的浏览器，每种浏览器都有⾃⼰的特⾊，本⼈拙见，在我⽤过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它⽐其它浏览器的地⽅。
可能⼤家对console.log会有⼀定的了解，⼼⾥难免会想调试的时候⽤alert不就⾏了，⼲嘛还要⽤console.log这么⼀长串的字符串来替代alert输出信息呢，下⾯我就介绍⼀些调试的⼊门技巧，让你爱上console.log先的简单介绍⼀下chrome的控制台，打开chrome浏览器，按f12就可以轻松的打开控制台⼤家可以看到控制台⾥⾯有⼀⾸诗还有其它信息，如果想清空控制台，可以点击左上⾓那个来清空，当然也可以通过在控制台输⼊console.clear()来实现清空控制台信息。
如下图所⽰现在假设⼀个场景，如果⼀个数组⾥⾯有的元素，但是你想知道每个元素具体的值，这时候想想如果你⽤alert那将是多惨的⼀件事情，因为alert阻断线程运⾏，你不点击alert框的确定按钮下⼀个alert就不会出现。
下⾯我们⽤console.log来替换，感受⼀下它的魅⼒。
看了上⾯这张图，是不是认识到log的强⼤之处了，下⾯我们来看看console⾥⾯具体提供了哪些⽅法可以供我们平时调试时使⽤。
1、先说⼀下源码定位⼤家打开看到页⾯右下⽅有⼀个推荐的图标吗？右击推荐图标，选择审查元素，打开⾕歌控制台，如下图所⽰我们现在想知道votePost⽅法到底在哪？跟着我这样做，在Console⾯板⾥⾯输⼊votePost然后回车直接点击上图标红的链接，控制台将定位到Sources⾯板中，展⽰如下图所⽰⼤家看了上⾯这个图⽚之后估计头都要晕了吧，这么多js都整在⼀⾏，让⼈怎么看呀，不⽤担⼼，按下图操作即可（也就是点击中间⾯板左下⽅的Pretty print就⾏了）这时我们再回到Console⾯板时会惊奇的发现原来的链接后⾯的1现在变成91了（其实这⾥的数字1或者91就是代表votePost⽅法在源码中的⾏号）现在看出Pretty print按钮的强⼤之处了吧知道了怎么样查看某⼀个按钮的源码，那接下来的⼯作便是调试了，调试第⼀步需要做的便是设置断点，其实设置断点很简单，点击⼀下上图所⽰的92即可，这时你会发现92⾏号旁边会多了⼀个图标，这⾥解释⼀下为什么不在91处设置断点，你可以试下，事实上根本就没法在91处上设置断点，因为它是函数的定义处，所以没法在此设置断点。
在Chrome浏览器中使用开发者工具引言随着互联网技术的迅猛发展和人们对于Web应用的需求不断增加，开发者工具成为了Web开发和调试过程中不可或缺的一部分。
Chrome浏览器作为市场占有率最高的浏览器之一，其内置的开发者工具功能强大且易于使用。
本文将介绍在Chrome浏览器中使用开发者工具的一些常用功能以及其用途。
一、开发者工具的入口在Chrome浏览器中，开发者工具可以通过多种方式打开。
最常用的方式是通过右键点击页面，选择“检查”或“检查元素”，或者使用快捷键Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac)来打开开发者工具。
另外，你也可以点击菜单栏上的三个点，选择“更多工具”然后再选择“开发者工具”。
二、检查和调试HTML和CSS开发者工具可以帮助开发者检查和调试HTML和CSS代码，以解决页面布局和样式的问题。
在“Elements”选项卡中，你可以查看和修改当前页面的HTML结构和CSS样式。
你可以通过右键点击元素，选择“编辑”来修改元素的样式，这有助于快速调试和验证各种布局和样式的效果。
三、JavaScript调试开发者工具还提供了强大的JavaScript调试工具。
在“Sources”选项卡中，你可以查看并设置断点、监视变量、单步执行代码等。
这对于排查JavaScript错误、调试复杂的逻辑和性能优化非常有帮助。
另外，你可以在“Console”选项卡中执行JavaScript代码，这是验证和快速定位问题的好工具。
四、网络请求分析在开发Web应用时，了解网络请求的情况对于优化性能是至关重要的。
开发者工具的“Network”选项卡记录了所有的网络请求，并提供了详细的请求信息、响应内容以及请求耗时等。
你可以通过过滤器筛选请求，并查看每个请求的详细信息，包括请求头、响应头等。
此外，还可以模拟不同网络条件下的请求速度，以测试应用在不同网络环境下的表现。
Chrome浏览器启动参数⼤全（命令⾏参数）前⾔在开发Web项⽬当中，浏览器必不可少，⽽浏览器的启动参数可以帮我们实现很多功能。
常⽤参数常⽤参数请参考下表。
序号参数说明1--allow-outdated-plugins不停⽤过期的插件。
2--allow-running-insecure-content默认情况下，https 页⾯不允许从 http 链接引⽤ javascript/css/plug-ins。
添加这⼀参数会放⾏这些内容。
3--allow-scripting-gallery允许拓展脚本在官⽅应⽤中⼼⽣效。
默认情况下，出于安全因素考虑这些脚本都会被阻⽌。
4--disable-desktop-notifications禁⽤桌⾯通知，在 Windows 中桌⾯通知默认是启⽤的。
5--disable-file-system停⽤ FileSystem API。
6--disable-preconnect停⽤ TCP/IP 预连接。
7--disable-remote-fonts关闭远程字体⽀持。
SVG 中字体不受此参数影响。
8--disable-web-security不遵守同源策略。
9--disk-cache-dir将缓存设置在给定的路径。
10--disk-cache-size设置缓存⼤⼩上限，以字节为单位。
11--dns-prefetch-disable停⽤DNS预读。
12--enable-print-preview启⽤打印预览。
13--extensions-update-frequency设定拓展⾃动更新频率，以秒为单位。
14--incognito让浏览器直接以隐⾝模式启动。
15--keep-alive-for-test最后⼀个标签关闭后仍保持浏览器进程。
（某种意义上可以提⾼热启动速度，不过你最好得有充⾜的内存）16--kiosk启⽤kiosk模式。
（⼀种类似于全屏的浏览模式）17--lang使⽤指定的语⾔。
常用系统调试工具的快捷键大全调试工具在软件开发和系统维护中起着至关重要的作用，能帮助开发人员定位和解决问题。
快捷键是提高效率的重要工具，掌握常用系统调试工具的快捷键大全，能够更加高效地进行调试。
本文将介绍一些常用调试工具及其快捷键。
一、命令行调试工具1. Windows系统Windows系统自带了一些命令行调试工具，如cmd、PowerShell等。
- cmd快捷键：- Ctrl+C：中断当前运行的命令。
- Ctrl+V：粘贴文本。
- Tab：自动补全文件名或路径。
- F7：显示历史命令。
- PowerShell快捷键：- Ctrl+C：中断当前运行的命令。
- Ctrl+V：粘贴文本。
- Tab：自动补全文件名或路径。
- F8：显示历史命令。
2. Linux系统Linux系统也有一些常用的命令行调试工具，如bash、ssh等。
- bash快捷键：- Ctrl+C：中断当前运行的命令。
- Ctrl+V：粘贴文本。
- Tab：自动补全文件名或路径。
- Ctrl+R：搜索历史命令。
- ssh快捷键：- Ctrl+C：中断当前连接。
- Ctrl+V：粘贴文本。
- Ctrl+D：退出当前会话。
- Ctrl+Z：挂起当前进程。
二、集成开发环境（IDE）调试工具1. Visual StudioVisual Studio是一款强大的跨平台集成开发环境，提供了丰富的调试工具。
- 断点调试快捷键：- F5：开始调试。
- F10：逐过程调试。
- Shift+F5：停止调试。
- Watch窗口快捷键：- Ctrl+Alt+W：打开Watch窗口。
- F9：添加或删除Watch表达式。
- F10：逐语句调试。
2. EclipseEclipse是一款流行的Java开发IDE，同样提供了强大的调试功能。
- 断点调试快捷键：- F11：开始调试。
- Ctrl+Shift+B：设置断点。
- F6：逐过程调试。
- Ctrl+Alt+Del：停止调试。
Chrome浏览器高级功能指南第一章：Chrome浏览器的基本介绍Chrome浏览器是由Google公司开发的一款快速、简单且安全的网页浏览器。
它在全球范围内广受欢迎，并且提供了许多高级功能，使用户能够更好地操作和管理其浏览器。
第二章：定制和个性化设置Chrome浏览器提供了丰富的定制和个性化设置选项，以满足用户的特定需求。
用户可以通过“设置”菜单访问这些选项，包括更改主题、字体大小、默认搜索引擎以及设置页面语言等。
第三章：多用户管理Chrome浏览器允许用户创建多个用户个人资料，每个用户个人资料都有自己的书签、扩展程序和设置。
这对于多人共享同一台计算机的家庭或办公室环境非常有用。
用户可以通过点击右上角的头像快速切换用户。
第四章：实用的快捷键Chrome浏览器具有许多实用的快捷键，以提高用户的浏览效率。
例如，按下Ctrl + T可以打开一个新的标签页，按下Ctrl + W 可以关闭当前标签页，按下Ctrl + Tab可以在不同的标签页之间切换。
第五章：标签页管理技巧Chrome浏览器允许用户同时打开多个标签页，但是管理这些标签页可能会变得混乱。
用户可以使用一些技巧来更好地管理标签页，比如将标签页固定到标签栏、使用标签组织器将相关标签分组以及使用标签预览功能快速查看标签内容。
第六章：实用的插件和扩展程序Chrome浏览器提供了丰富的插件和扩展程序库，用户可以从中选择适合自己需求的应用程序。
这些插件和扩展程序可以提供各种功能，比如广告拦截、密码管理、截屏工具等。
第七章：隐私和安全设置Chrome浏览器非常注重用户的隐私和安全。
用户可以通过设置菜单中的隐私和安全选项来控制他们的浏览数据和个人信息。
用户可以清除浏览历史、禁用Cookie、启用安全浏览和密码保存等功能。
第八章：开发者工具Chrome浏览器提供了一组强大的开发者工具，用于帮助开发人员调试和测试网页。
这些工具包括元素检查器、网络面板、控制台等，对于Web开发人员来说非常实用。
使⽤⾕歌浏览器调试安卓app（h5）之遇到坑对于前端⼈员来说这⼀点是必须要弄清楚的，但是对于⼩⽩来说还是有⼀点的坑。
⾸先得看你的安卓是否⽀持‘’开发⼈员选项‘’，如果⽀持就直接打开USB调试（不会的⾃⼰百度搜索哦）那开始教程：第⼀步，在你的⼿机上安装⾕歌浏览器,第⼆步，在你的⼿机安装你要调试的app，但是在安装你的app之前你必须安装的是debug版本，就是可以调试的。
那要怎么弄才是调试的，我使⽤androstudio，在启动⽂件中添加：webView.setWebContentsDebuggingEnabled(true);在这个⽂件中修改如下这样打包出来的app就是可以调试的。
第三步：就是安卓⼿机和pc端⾕歌浏览器之间的联系了，具体如下：1.⼿机端环境:安装⾕歌浏览器打开开发者模式（请根据不同机型⾃⾏百度）⾕歌浏览器输⼊访问地址（随便默认，只要打开了⾕歌浏览器就可以）2，使⽤USB数据线把你的⼿机和电脑连接2.pc端：⾕歌浏览器打开 chrome://inspect/#devices⽹址, 若⼿机连接电脑成功则出现设备号，详见下图:点击 inspect 开始调试，若出现 http/1.1 404 not found ，请打开电脑端VPN，再次点击inspect，若打开vpn不会编辑，⾃⾏⽩度和问⾼⼿。
出现这个的原因是因为不能访问，⼿机端的⾕歌浏览器，和pc端的⾕歌浏览器不是同版本，⽆法访问，所以我们必须要FQ，但是FQ也是⼀个难题，打开这个⽹址之后，需要注册，然后下载对应的压缩包，然后根据说明⼀步⼀步的完成就ok了⾸先进⼊到⾸页，根据图上提⽰：下载完之后，解压解压包，打开之后运⾏：如图：此后就会出现这个界⾯：点击订阅，就会出现，订阅设置，和订阅更新：如下图：最后在我们电脑右下⾓那⾥点击右键弹出http代理和⼀些其他的内容，选中http中的开启http（全局模式）。
最后再去调试我们的app就不会出现 http/1.1 404 not found。
python爬⾍基础18-Chrome调试前端⼯具01 Chrome调试抓包⼯具原理Chrome 开发者⼯具是⼀套内置在Google Chrome中Web开发和调试⼯具。
使⽤开发者⼯具来重演，调试和剖析您的⽹站。
其中常⽤的有Elements(元素⾯板)、Console(控制台⾯板)、Sources(源代码⾯板)、Network(⽹络⾯板)。
设置断点使⽤断点来暂停JavaScript代码，审查变量的值和在特定时刻所调⽤的堆栈。
设置断点的最基本的⽅法是在特定的代码⾏上⼿动添加⼀个断点。
也可以将这些断点配置为仅在满⾜特定条件时触发。
例如事件，DOM更改。
在源代码的左侧，您可以看到⾏号。
这个区域称为line number gutter(⾏号槽)。
单击⾏号槽中的⾏号，就会在该⾏代码上添加⼀个断点。
监测DOM变化的断点DOM断点分为三种：1.Subtree Modifications(⼦树修改) - 当当前选定节点的⼦节点被删除，添加或⼦节点的内容发⽣更改时触发。
当⼦节点属性改变时，或当前选择的节点发⽣任何改变，都不会触发该类型的断点。
2.Attributes modifications(属性修改) - 当在当前选定的节点上添加或删除属性时,或当属性值改变时触发。
3.Node Removal(节点删除) -当当前选定的节点被删除时触发。
设置⽅法：在HTML元素上右键单击，然后选择Break on>Subtree Modifications(⼦树修改)。
节点左侧的蓝⾊图标 DOM断点图标表⽰在该节点上设置了DOM断点。
事件触发断点当某事件（例如，click(点击)）或事件类别（例如，任何mouse(⿏标)事件）被触发时，使⽤Sources(源⽂件)⾯板上的Event Listener Breakpoints(事件侦听器断点)窗格中断。
逐步调试功能作⽤域当脚本中断的时候，Scope(作⽤域)窗格将显⽰当前时刻所有当前定义的属性。
前言：
在实际项目开发中我们经常需要在浏览器中调试自己写的代码，然后把调试好的代码再copy到本地文件中，这种调试方法比较麻烦，万一遇到我刚把代码调试好还没来的及将代码copy下来写入到文件中，就断电了，或被朋友拉出去玩了呢，那我岂不是亏大了。
还好chrome浏览器的调试工具相当的流弊，把可以把我们调试的代码保存到本地文件中，当你调试好后只要轻轻按下ctrl+s，一切就ok了。
看下chrome调试工具的用法吧：
Step One：
Step Two：
Step Three：
Step Four：
Step Five：
Step Six：
Step Seven：
Step Eight：
Step Nine：。
chrome浏览器配置from time import sleepfrom selenium import webdriverclass ChromeOptions:def options(self):# chrome浏览器的配置项，可以通过修改默认参数，改变默认启动的浏览器的形态options = webdriver.ChromeOptions()# 将浏览器默认设置为最⼤窗体options.add_argument('start-maximized')# 设置默认窗体的启动⼤⼩# options.add_argument('window-size=400,2000')# ⽆头模式：虽然看不到，但是⼀切照旧，在⼀些特定场景下会失败# options.add_argument('--headless')# 去掉默认的提⽰⾃动化信息：没啥⽤，⼀般没有什么影响。
警告条可能会导致页⾯内容的遮挡或者挤压，影响⾃动化测试 options.add_experimental_option('excludeSwitches', ['enable-automation', 'enable-logging'])# 去掉控制台多余信息# options.add_experimental_option('excludeSwitches', ['enable-logging'])# ⽼版本去掉警告条的参数，已经不⽣效了。
已弃⽤# options.add_argument('disable-infobars')# 读取本地缓存，实现⼀个有缓存的浏览器，这个指令执⾏前必须关闭所有本地的chrome浏览器# options.add_argument(r'--user-data-dir=C:\Users\xuzhu\AppData\Local\Google\Chrome\User Data')# 去掉账号密码弹窗prefs = {}prefs["credentials_enable_service"] = Falseprefs["profile.password_manager_enabled"] = Falseoptions.add_experimental_option("prefs", prefs) ##关掉密码弹窗# 指定窗⼝打开在哪个位置# options.add_argument('window-position=2200,500')# 隐⾝模式# options.add_argument('incognito')# 去掉控制台打印的多余信息：忽略！暂时参数有问题# options.add_argument("--disable-gpu")# options.add_argument("--log_level= 3")# options.add_argument("--ignore-certificate-errors")return options## if __name__ == '__main__':# driver = webdriver.Chrome(options=ChromeOptions().options())driver.get('https://')# driver.find_element("xpath",'//*[@id="app"]/div[2]/div/div[2]/div[2]/div/div[1]/div[2]').click()元素操作使⽤# driver.find_element("id","tel").send_keys("需要输⼊的内容：⼿机号")# driver.find_element("id","password").send_keys("密码")# driver.find_element('xpath','//*[@id="app"]/div[2]/div/div[2]/div[2]/div/div[2]/div[2]/button').click()# sleep(10)# driver.quit()。
1，Chrome模拟安卓手机网页1，打开chrome浏览器，按F12打开调试界面2，打开仿真面板，步骤如下。
可以在Device 选择设备。
可以在Screen 设置模拟的屏幕方面的东西，设置分辨率，屏幕尺寸。
可以在Network 设置客户端版本和选择WIFI和3G网络等。
可以在sensors 设置感应等，模拟触屏操作。
Screen，Netwok，sensors一般都不需要特殊设置，选择设备之后会自动填写合适的参数。
调试界面最主要的几个面板（如下图）下面将介绍常用面板的作用和使用这个部分主要是显示实时的DOM树。
在页面中右键单击审查元素，就会出现Elements的面板。
这个就是查看、编辑页面上的元素，包括HTML和CSS：1，当鼠标在DOM树上的节点滑过时，如果该节点在整个页面中是可见的，你可以看到一个指向该元素位置的tip（如果当前视口看不到节点，tip的箭头会指向其所在的方向），如图：我们可以从这个tip中得到元素的tagName，id（如果有），class（如果有），width，height。
2，鼠标选中节点后，该节点会高亮，而且会在下面的style，Computed，Event Listeners，DOM Bre akpoints，Properties面板中显示选中节点对应的信息（后面具体描述），同时：DOM树下面会显示当前节点的所有父辈节点，直到html3，鼠标在节点（非文本节点）上右键，会出现一份菜单：菜单从上之下依次是（以下所述快捷键都是在选中元素时生效）：(1)，Add attribute：添加属性，比如添加title属性；(节点没有属性时，快捷键为Enter或鼠标双击该节点，Tab键进行切换)(2)，Edit attribute：编辑属性（在节点的属性上右键才出现这项）；（节点没有属性时，快捷键为E nter或鼠标双击该节点，Tab键进行切换)(3)，Force element state：使元素处于某种伪类状态，可选四种：:active -> 选定状态:hover -> 鼠标移到元素上的状态:visited -> 已经访问过的状态:focus -> 获取焦点状态这些状态通常用来调试不同状态下的css样式，如果css存在这4中状态，只有选中状态才能看见c ss代码。
Chrome调试大全 作为一名前端开发者，打交道最多的可能是和浏览器。市面上各种浏览器多不胜数，主流的有Chrome，Firefox，Safari，IE，Opera，非主流的如360，遨游，QQ浏览器，搜狗浏览器，据说淘宝最近也要出浏览器了。不过个人最喜欢的还是Chrome，因为它的简洁和快速，还有功能的强大。FF什么的我觉得它已经慢得跟不上时代了:-D，这是个人意见，喜欢FF的朋友尽管吐槽。虽然IE和Firebug的开发工具都用过，但始终觉得不如Chrome顺手。下面就详细介绍一下Chrome的开发人员工具。
Chrome一共有8个功能子集。如下图:
1、Elements： 这个部分主要是显示实时的DOM树。在页面中右键单击审查元素，就会出现Elements的面板。 左边就展示的是DOM树，在一个DOM节点上点击右键就会出现一个菜单，一共分为4部分，第一部分是添加和编辑节点的属性，例如class等。第二部分是编辑节点，点击Edit as HTML，就可以像在编辑器中一样编写代码，Copy as HTML就是复制代码了，Delete node是整个删除节点。第三部分是添加DOM的断点。如果我们添勾选了任何一个，就会在右边栏的第五部分DOM breakpoints出现，这里对应的是JS的对DOM的操作，如果出现对应的事件（节点子树改变、节点属性改变、节点被移除），那么JS就会在相应的事件监听函数那里挂起，这个在后面JS设置断点再讲解关于断点的东西。最后一部分是文字换行，貌似用处不大。
底部显示的是一个当前元素的所有祖先元素。例如，上图中当前元素是body，它的祖先元素是html（也是父级元素），如果html有父级元素，仍然会显示html的父级元素（这里例子有点特殊）。 接下来看看右边栏。一共有6部分，分别是：Computed Style、Styles、Metrics、Properties、DOM Breakpoints、Event Listeners。Computed Style显示的是所选元素的最终样式（对应JS中的getComputedStyle()方法），如果勾选了Show inherited，将会显示此元素的所有style属性，Computed Style中的属性是只读的，不能实时修改，所以主要用来查看元素的最终属性值。
而第二部分Styles估计是用得最多的。这里会显示作用在所选元素的所有css规则，包含css文件中的样式规则，还有user stylesheet和user agent stylesheet的样式。样式按照权重的大小排列，最上面的是权重最高的，下面是权重低的。最上面的element.style是元素的内嵌样式。user stylesheet是用户样式，不过一般不会有人自定义样式。user agent stylsheet是浏览器的默认样式，通常的css reset就是将这个reset掉。背景不是灰色的部分是可以修改的样式，我们对样式的修改会实时显示在页面中，这就省去了我们为了修改几个像素去修改css文件然后保存刷新的过程，同时也可以禁用和启用某些样式。在Styles的标题栏有一个鼠标箭头的图标，点击之后就会出现伪类，因为一般情况下不会出现伪类的css规则。 第三部分Metrics显示了元素作为盒模型的各个参数。第四部分Properties显示了元素作为DOM对象的各个属性。例如上图中所示，这里从上到下是一个继承的关系。最上面是一个HTMLDivElement的实例，第二个是HTMLDivElement的类。第三个，是HTMLElement类，HTMLDivElement类继承自HTMLDivElement类。接着分别是Element类，Node类，和Object类。如果选择不同的节点类型，就会出现不同的继承关系。第四部分是DOM Breakpoints，这个后面再细讲。最后一个是Event Listeners，这个显示了绑定到当前元素的事件监听函数，而且会显示事件冒泡或捕获（即能够响应此事件的所有元素）。 2、Resources 这个面板会显示所有加载的资源，如上图所示。底部的中间有个铅笔图标的按钮，点击之后就可以实时编辑css或者js文件。其他例如Local Storage、Session Storage、Cookies都可以查看。
3、Network Network的功能是非常实用和强大的，我们能够用它来查看很多信息。 上图分为8列，从左到右分别是Name、Method、Status、Type、Initiator、Size、Time和Timeline。Name表示加载的文件名，Method表示请求的方法，Status表示状态码（200为请求成功，304表示从缓存读取），Type表示文件的MIME Type的类型。Initiator表示发出这个文件请求的发出者，Size表示文件大小。Time表示每个请求的总时长，Timeline以图表的形式显示了整个网页的请求和加载情况。我们可以看到哪些请求是同时发出的，哪些请求被阻塞了。Timeline中有一条蓝线和一条红线，蓝线表示DOM Content Loaded事件触发的时间，红线表示 Window onload事件触发的时间。底部的选项卡将请求的文件进行了分类，便于查看，如：Document、Stylesheets、Images、Scripts、XHR、Fonts、Websockets和Other。
Timeline中鼠标移到每个时间条上的时候，会显示整个请求的详细信息，如下图所示：DNS Lookup、Connecting、Sending、Waiting、Receiving。 如果某个请求被阻塞了，还会显示Blocking。单击右键会出现一个菜单，如下图：在新的选项卡中打开连接、复制请求头和响应头、复制和保存HAR格式的文件，清除缓存和cookie。
当点击一个具体的文件时，会出现更为详细的请求信息： 这里可以看到请求头信息和响应头信息，这对于Ajax的开发很有帮助。右边栏顶部的选项卡还有Preview、Response、Cookies、Timing等信息。
4、Scripts 接下来重点讲一下JS的调试。如果没有编程基础，并且将JS作为第一门编程语言进行学习的同学可能对JS的调试不是特别清楚。一般来说调试需要设置断点，当程序运行到这里的时候就会被挂起，我们就能够查看挂起状时的各种状态，例如变量值，函数的调用栈，或者自定义的表达式。我们可以看到右边栏有8个部分，分别是Watch s、Call Stack、Scope Variables、Breakpoints、DOM Breakpoints、XHR Breakpoints、Event Breakpoints和Workers，前面三个部分表示的是运行时的状态，后面5部分表示所设置的断点。
Watch s中点击右边的加号可以添加表达式，因为JS中只要是表达式就会有值，所以这里可以是变量，也可以是函数表达式，也可以是其他表达式。如果函数运行到某一行代码，想要查看这行代码中的某个变量值为多少，可以将这个变量添加到Watch s里面，点击刷新按钮，就会出现这个变量的值，例如下图中就有变量i的值。 下面一个是函数的调用栈。如果在a函数中调用了b函数，那么a函数的栈顶被推入函数b，执行流进入函数b，如果在函数b中又调用了函数c，那么函数b的栈顶又被推入c，执行流进入c，c执行完毕之后，函数c就出栈，执行流再次进行函数b，函数b执行完毕之后，b出栈，最后a出栈。这样调用的顺序关系，就体现在了调用栈上。在某个函数中设置了断点，程序执行到这个断点的时候，检查Call Stack，就可以知道这个函数是被哪个函数调用了，而它的调用者又是被哪个函数所调用。点击每个函数栈，执行流还会退回到相应的函数。
第三部分是作用域中的变量，包括局部作用域和全局作用域，而且还有当前作用域中的闭包。通过Scope Variables，可以查看各个作用域内的变量的值。有时需要跟踪某个变量的变化情况，可以通过这个来观察。还有一个方便的功能就是将鼠标移到左边栏代码的变量上，会弹出这个变量的值，而不用到Scope Variables中去找了。IE9和IE10都增加了这样功能，不过Firebug没有此功能，并且Firebug也没有代码高亮，这给调试带来了一定的麻烦，所以很少使用Firebug来调试js。三个浏览器列出的信息侧重点不同，算是各有所长吧。 后面的几部分都是断点的设置，只是方式不太一样。前面说过断点的作用就是将函数挂起，DOM Breakpoints的作用就是在DOM被修改时，在修改的代码前挂起。XHR Breakpoints就是在出现了XHR请求的时候挂起，具体就是在xhr.send()这个方法处挂起。Event Breakpoints就是在触发了相应的事件时，在事件函数处挂起。我们可以选择不同的需要设置断点的事件，如Keyboard、Mouse等事件。例如我们设置了一个方法a.onclick = function(){…}，在点击a的时候，程序就会在这个function处挂起。最后是Workers，可以设置的只有Pause on start，就是在和Workers通信开始的时候挂起。
设置好了断点，下图的这几个按钮就非常有用了，他们出现在右边栏的顶部。第一个按钮（像播放一样的按钮）是暂停和开始。当设置了断点之后，js的执行就暂停了，如果我们想要跳过当前的断点继续执行js，就可以点击这个按钮，点击之后js的执行会继续，如果在接下来的执行过程中再次遇到断点，那么就会在那个断点处暂停。第二个按钮（弧形的按钮），是跳过按钮。如果在执行的过程中遇到了一个函数，点击这个按钮，调试程序就会跳过这个函数的具体执行过程，直接到达函数执行完毕的状态，不过如果没有遇到函数，调试也会一步一步地执行。向下的箭头是进入按钮， 如果遇到了一个函数，那么就会进入这个函数，如果没有遇到函数，调试就一步一步执行。向上的箭头是返回按钮，点击之后会退出当前正在执行的函数，到达函数执行完毕的在状态，如果是在全局作用域中，那么句退出调试。最后一个按钮是激活和反激活所有的断点，如果当前的断点是激活的，点击之后所有的断点将不起作用，再次点击之后恢复作用。
最后在左下部有三个按钮，如下图： 第一个按钮有三种状态：Don’t pause on exceptions，Pause on all exceptions，Pause on uncaught exceptions。第一种状态是出现异常时不暂停，第二种是在出现异常的地方暂停，第三种是在出现了没有被捕捉的异常处暂停，这里的暂停也就是设置一个断点。 第二个按钮表示代码的格式，是否格式化代码，不格式化将以原本的方式显示。最后一个铅笔图标的按钮点击之后就可以修改代码了。某些邪恶的同学可能已经想到可以用这个来干一些坏事了。
