# 调试工具

# chrome开发者工具

# chrome断点

# 点击文件中相应代码的行数选择断点，在右侧Breakpoints中有所有打过的断点列表，点击对应checkout的第一行取消该断点，点击下一行，直接跳到该代码处。

# 刷新或者点击页面开始执行断点也调试。

# 6个按钮

# (1) pause script excutio 【单步执行，在断点处暂停，等待调试】暂时后变为

Resume script excution【继续执行】快捷键 F8或者ctrl + \

# (2) Step over next function call【单步跳过】跳到下一个断点，快捷键F10或者ctrl+`

在69行和70行分别设置两个断点，先执行69行断点，在jquery中寻找源码后继续执行下一个断点，即alert('123') 如果没有断点了就继续执行完这个click函数，执行$("#txt").val(txt);然后执行if-else分支，但不进入if-else函数中

# (3) Step into next function call 【单步进入】进入函数内部调试，快捷键【F11 或者 Ctrl + ;】

继续点击,执行下一步，直到跳出if条件语句的判断

# (4) Step out of current function 【单步跳出】，跳出当前断点的函数快捷键【Shift + F11 或者 Ctrl + Shift + ;】

# (5) 使所有断点临时失效

# (6) Don’t Pause on exceptions:不要在表达式处暂停，

  pause on caught exceptions 当抛出错误的时候暂停

# 在element处右击dom元素,设置此dom为断点

• 子节点变化断点 (subtree modifications) 主要针对子节点增加、删除以及交换顺序等操作，但子节点进行属性修改和内容修改并不会触发断点。
• 节点属性断点 (attributes modifications)
• 节点移除断点 (node removal)

# xhr断点 异步请求时触发断点

# 事件断点 在所选事件发生时触发断点

# js source断点 执行到此断点时会一步步看到当前作用域中所有变量的值

# 抓包工具

# 抓包是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全，与数据截取等。

• chrome开发者工具－－network选项
• 点击工具条上方小红点record network log，可以记录下整个访问过程中所有抓包结果，否则只记录当前页面的抓包结果。
• 可查看网页相关数据信息，网址，接口请求状态，js,css,image等加载状态
• 点击网址可看到有以下几个选项，Headers,Preview,Response,Cookies,Timing
• 在Headers中包括请求地址，请求方式，请求头，请求方式，响应头，响应内容等
• 在Response中可单独查看响应状态码的返回，返回数据等
• 在Timing中可查看时间等

# Fiddler

# 什么是Fiddler

• fiddler 是一个使用本地127.0.0.1：8888的HTTP代理，任何能够设置HTTP代理为127.0.0.1:8888的浏览器和应用程序都可以使用Fiddler。
• fiddler 是位于客户端和服务器端口的HTTP代理，能够记录客户端和服务器端的所有HTTP请求，意味着客户端所有的请求与服务器所有的响应都要经过fiddler，fiddler可以分析请求数据、设置断点、调试web应用、修改请求数据、返回服务器数据。

# Fiddler包括四个部分：

• 菜单栏
• 工具栏
• web Session面板，fiddler抓取到的每条http请求，主要包含请求的url，协议，状态码，body等信息
• 详情和数据统计面板，针对每条http请求的具体统计 1.Statistics 请求响应条目，发送字节数，接收字节数，响应字节数，性能时间等
  2.Inspectors，上半部分是请求内容，下半部分是响应内容。有headers,textView、SyntaxView,hexView,Raw等多种方式查看单条http请求的请求报文的信息
  3.AutoResponder 允许拦截指定规则的需求，拦截后只可访问有规则关键词的网址，并重定向到规则中设置的资源。
  4.Composer 可以实现自主义请求发送到服务器，可直接拖拽一条session到这里，也可以实现模拟向服务器发送数据的过程，
  5.Filters 请求过滤规则，Zone可指定只显示内网或互联网的内容；Host指定显示某个域名下的会话
  6.Timeline 请求响应时间

# 解密https，监听https请求

• 1.[Tools] —— [Fiddler Options] ——　[HTTPS]选项卡
  2.勾选[Decrypt HTTPS Traffic] 并依次点击[yes],[ok] 信任此证书

# 抓取数据包

[File] —— [Capture Traffic]

# 连接手机

• 保证手机与电脑处于同一局域网内
• 点击菜单栏的 [Tools] —— [Fiddler options]
• 点击[Connections] —— 设置端口号为8888,勾选[Allow remote computers to connect]
• 手机设置代理，服务器为本机ip地址，我的是192.168.2.118，端口为上面设置的8888
• 手机浏览器访问 192.168.2.118：8888,下载证书
• 证书下载后并不能直接点击安装，而是要到手机的[设置] —— [安全] —— [从手机安装] 安装证书
• 重启Fiddler(很重要，如果没有重启那手机有网但是打不开网页)
• 现在就可以访问应用在Fiddler里看到截取到的数据包啦

# Fiddler内置命令与断点

• 点击左下角黑色的命令框
• 命令断点的详细功能与截图见(http://blog.csdn.net/qq_21445563/article/details/51017605)
• 命令
  • ? (?google) 匹配包含此字符串的请求

  • (>500) 匹配请求大小大于这个数的请求

  • < (<500) 匹配请求大小小于这个数的请求
  • = (=200) 匹配等于此数的状态码
  • @ (@www.baidu.com) 匹配域名
  • select (select image) 匹配类型
  • cls　清空当前请求
  • dump 保存请求成saz压缩包
  • start 开始监听请求
  • end 停止监听请求
• 断点,无参时表示中断此断点
  • bpafter (bpafter baidu) 中断所有包含此字符串的请求
  • bpu (bpu baidu) 中断响应
  • bps (bpx 200) 中断所有状态码为此的请求
  • bpv/bpm (bpv get)只中断http方法的命令(get,post)
  • g/go 放行所有中断下来的请求，恢复请求状态

# Fiddler中显示的http状态码

• 200 请求成功
• 404 找不到页面
• 500 服务器内部错误
• 304 已是缓存状态，不需要再发送请求到服务器

# 远程调试工具

# Weinre全称WebINspector Remote(翻译过来是远程web检查器),可在PC上直接调试运行在移动端的远程页面，

# weinre工作原理

Debug客户端（client)：本地的web检查器，远程调试客户端 Debug服务端(agent)：本地的HTTPServer，为Debug客户端与Debug目标页面建立通信 Debug目标页面：被调试的目标页面，页面已嵌入weinre的远程js 客户端、目标页面与Debug服务端之间使用XMLHttpRequest (XHR)进行HTTP通信，你通常的使用情形是将Debug客户端与服务端搭建在桌面开发环境，Debug目标页面放在移动设备。

# 安装方式 ：npm install-g weinre

• 过程中尝试用yarn install 安装，但因为yarn的安装位置问题，导致weinre不可用，所以还是建议用npm 安装

# 步骤

# (1) 在本地开启监听服务器，ipconfig查看本地ip

weinre --boundHost [hostname | ip address |-all-]  --httpPort [port]
weinre -boundHost 192.168.2.45

# (2)可用weinre --httpPort 8081 --boundHost 192.268.2.45

# (3)访问weinre及在页面上调用

# (4)在调式的页面中加入远程调式所需要的JS代码

<script src="http://192.168.2.45:8080/target/target-script-min.js#anonymous"></script>

# (5)点击第一个链接

# (6)进入此页面，如果连接成功，网址变成绿色，按钮显示高亮

# (7)可下载草料二维码，将浏览器地址的127.0.0.1改为192.168.2.45,端口不变，此端口与weinre服务器端口不一样，此端口是访问页面的端口

# (8)多用户调试

改变<script src="http://192.168.2.45:8080/target/target-script-min.js#anonymous"></script>中的id"#anonymous"为自己的id（例#product),
然后访问网址从http://192.168.2.45:8080/client/#anonymous改为http://192.168.2.45:8080/client/#product即可
注意：每次开机都有新的ip地址，这是页面中<script></script>标签中的Ip地址与页面访问ip地址也要做相应更改。