黑马程序员技术交流社区
标题: 【上海校区】Chrome浏览器调试技巧 [打印本页]
作者: shjava 时间: 2017-12-8 11:56
标题: 【上海校区】Chrome浏览器调试技巧
本帖最后由 shjava 于 2017-12-8 12:07 编辑
Chrome浏览器及调试教程
前言
在web开发过程中，我们在写JavaScript脚本时难免会遇到各种bug，这时，我们就需要去调试我们的JavaScript脚本，然后去修改代码。最简单的调试方法就是使用alert方法，将可信息通过alert方法的弹窗显示出来。但是，alert方法有几个弊端：
1）alert方法在弹出窗口时会中断程序；
2）在循环中使用alert（）方法时，如果不点击alert弹窗的确定按钮，下一个alert就不会出现；
3）alert方法在显示对象时永远只显示[Object]，无法看到对象中的具体细节；
正是由于alert方法存在上述缺点导致了alert方法只适合一些小程序。如果想要查看JavaScript脚本的执行过程，HTTP请求信息，执行过程中的数据信息则需要学会使用浏览器的开发者工具进行调试。
1.浏览器简介file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg
浏览器的主要功能：
浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是PDF、图片或其他的类型。资源的位置由用户使用 URI（统一资源标示符）指定。
浏览器解释并显示 HTML 文件的方式是在HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C（万维网联盟）进行维护。
多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。如今，大多数的浏览器都是或多或少地遵从规范。
简而言之，就是一个获取网页,并将它显示给用户的工具。
浏览器界面介绍：
浏览器的用户界面有很多彼此相同的元素，其中包括：
用来输入 URI 的地址栏
前进和后退按钮
书签设置选项
用于刷新和停止加载当前文档的刷新和停止按钮
用于返回主页的主页按钮
浏览器的高层结构
浏览器引擎- 在用户界面和呈现引擎之间传送指令。
呈现引擎- 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
网络 -用于网络调用，比如HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
用户界面后端- 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
JavaScript 解释器。用于解析和执行JavaScript 代码，就是后面讲到的JavaScript引擎。
数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML规范(HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
我们这里谈到的浏览器：
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg
目前使用的主流浏览器有五个：Internet Explorer、Firefox、Safari、Chrome 浏览器和Opera。本文中以开放源代码浏览器为例，即 Firefox、Chrome 浏览器和 Safari（部分开源）。根据 StatCounter 浏览器统计数据，目前（2011年 8 月）Firefox、Safari 和 Chrome浏览器的总市场占有率将近 60%。由此可见，如今开放源代码浏览器在浏览器市场中占据了非常坚实的部分。
1.1下载与安装安装：傻瓜式的安装，一路点击下一步。
2.Chrome开发者工具之断点调试2.1 JavaScript脚本断点调试
第一步：打开开发者工具，按F12或者在浏览器页面上右键选择检查。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image008.jpg第二步：在Source面板中找到需要调试的文件。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image010.jpg 第三步：设置断点。file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image012.jpg
第四步：触发调试部分程序的运行，开始调试。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image014.jpg
调试过程中常用的按钮及快捷键：
跳到下一个断点：点击Sources面板右侧的“三角按钮”file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image016.jpg
快捷键：F8
Ctrl+\
跳到下一步（逐步跨方法）：点击Sources面板右侧的第二个按钮file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image018.jpg
快捷键：F10
Ctrl+’
跳进断点处的方法中：点击Sources面板右侧第三个按钮file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image020.jpg
快捷键：F11
Ctrl+;
跳出正在执行的方法：点击Sources面板右侧第四个按钮file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image022.jpg
快捷键：Shift+F11
Ctrl+Shift+;
禁用断点：点击Sources面板右侧的第五个按钮file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image024.jpg
暂停在捕获到的异常处：点击Sources面板右侧的第六个按钮，然后勾选Pause On Caught Exception
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image026.jpg
暂停在未捕获的异常处：点击Sources右侧的第六个按钮，不勾选Pause On Caught Exception. file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image028.jpg
Sources面板调试过程中快捷键预览：
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image030.jpg
查看断点处，获取的数据的值：将鼠标光标停留在变量上面即可，也可以将变量赋值到Console的控制台上打印出来。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image032.jpg
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image034.jpg
清除断点：
在Source面板最右侧面板中，找到Breakpoints打开，可以看到你打的断点。在断点列表出右键选择Remove all breakpoints可以一次性删除所有断点。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image036.jpg
2.2 XHR断点调试右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在request.send() 的地方中断。
2.3 事件监听断点 事件监听是对我们选定的是事件类型进行监听，当这个事件触发的时候，程序就会在这个事件处停止。有助于我们快速找到某一个元素上绑定的事件。
应用场景：我们刚接手一个项目时，对业务不熟。想找到提交登录事件对应的方法，但是发现页面上登录按钮绑定事件写的不是很明确，而且处理登录业务的JavaScript脚本文件有几百行，想找到这个按钮很不容易。此时，我们就可以选定鼠标的点击事件进行监听，当我们点击登录按钮的时候控制台Sources面板会自动将我们带到登录方法处。
事件监听断点使用步骤（以查找天猫首页登录方法为例）：
1.首先打开京东登录页面找到登录按钮； file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image038.jpg
2.在登录按钮上右键属性==》检查 打开开发者工具，然后打开Sources面板 file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image040.jpg
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image042.jpg
3.打开Sources面板右侧的EventListener Breakpoints 找到Mouse及鼠标事件下边的click然后勾选上。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image044.jpg
4. 点击登录按钮，触发鼠标的点击事件，发现程序中断在JavaScript文件中，点击面板下方的 “{}” 将代码格式化一下，此时就找到了登录按钮触发的点击事件了。file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image046.jpg
此时就可以一步一步的像下跟，知道跟到天猫的登录方法了。
3其他设置3.1 设置开发者工具的位置： Chrome刚安装好时，打开开发者工具，开发者工具默认在浏览器的左半边。file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image048.jpg
可以通过开发者工具面板右上角的file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image050.jpg设置开发者工具在浏览器中出现的位置。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image052.jpg
视图1：开发者工具以一个独立的窗口存在；视图2：在浏览器下方显示；视图3：在浏览器右半边显示。
3.2 清除浏览器缓存的方法： 浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。但是，对开发人员来说，我们修改了JavaScript脚本之后需要立即看到修改的效果，所以需要清除缓存，清除缓存常用的方法有：
1.Ctrl + F5 F5通常只是刷新本地缓存；Ctrl+F5可以把INTERNET临时文件夹的文件删除再重新从服务器下载，也就是彻底刷新页面了。
2.开发者工具打开之后，快速清除缓存的方法： 开发者工具打开之后，浏览器刷新图标上右键会出现清空缓存并硬性重新加载。这一方法能够在开发者工具打开时快速清理缓存。 file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image054.jpg
3.Ctrl + Shift + Del 快捷键清除缓存。 选中地址栏中的URL
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image056.jpg
按快捷键：Ctrl + Shit + Del 会弹出一个清除浏览数据的弹窗，选择要清理的数据项之后，点击清除浏览数据即可。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image058.jpg
3.3 禁用页面的JavaScript脚本；应用场景：在开发互联网电商项目时，需要一些商品图片，于是就去京东找到一个商品打开商品图片之后，想复制或者将这个图片另存为，此时，发现右键后什么都没有。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image060.jpg
原因是，京东在图片上通过JavaScript脚本禁用了鼠标右键点击事件。此时，我们可以通过禁用当前页面的JavaScript事件，通过鼠标右键保存图片。file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image062.jpg
禁用网页JavaScript事件的方法：
1）开发者工具==》Settings
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image064.jpg
2）勾选Debugger下的Disable JavaScript 复选框。
file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image066.jpg
作者: 桃谷绘里香 时间: 2018-1-24 09:25
腾锅棒棒哒............................
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |