spy-debugger(前端页面调试抓包工具)快速上手：第一步：安装npminstallspy-debugger-gwin+r=>输入cmd=>安装npminstallspy-debugger-g第二步

使用weinre/spy-debugger调试手机页面文章目录使用weinre/spy-debugger调试手机页面下载weinre运行weinre开始调试文末彩蛋spy-debugger安装spy-debugger

调试工具也具有多样化的特点，如Charles、Spy-Debugger、Whistle以及本篇将重点介绍的ChromeDevTools。

前言1、工具的选择抓包方式有多种（Charles、Fiddler、Spy-debugger、Wireshark等），这里只说这一种Charles！

1、Charles安装下载地址：https://www.charlesproxy.com/latest-release/download.do安装完成后需要安装证书，Help–SSLProxying–InstallCharlesRootCetificate，然后弹出证书安装页面，完成后将证书设置为始终信任。1.png2、手机安装证书点击Charles的Help–SSLProxying–Instal

之前用的charles是挺好用的，可惜只能用来抓包，而spy-debugger除了抓包，还能直接在真机上调试页面，很是方便，QQ图片20181220095827.png但是在安装的时候遇到了很多问

前言1、工具的选择抓包方式有多种（Charles、Fiddler、Spy-debugger、Wireshark等），这里只说这一种Charles！

但是，PC端调试和最终在移动端呈现的效果仍然存在差距，那么这时我们就可以使用spy-debugger来进行真机调试。

4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。

本文主要介绍了spy-debugger的使用方式，有同事使用的mobile-debugger也很好用。页面调试+抓包。调试生产HTTPS页面。特性1、页面调试＋抓包2、操作简单3、支持HTTPS。

关于spy-debugger一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。

安装方法：https://www.npmjs.com/package/spy-debugger其中，安装证书，可以从此处下载后安装。

但是，PC端调试和最终在移动端呈现的效果仍然存在差距，那么这时我们就可以使用spy-debugger来进行真机调试。

spy-debugger移动端浏览器调试工具页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设

4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。

1.weinre基于nodejs，因此首先要安装nodejs，然后使用npm进行安装：npm-ginstallweinre2.运行weinre--httpPort8081--boundHost-all-3.获取本机的IP地址，例如：192.168.1.101，添加如下js文件到需要调试的目标文件的头部：4.staticWebDir:将文件放置如图文件下5.手机访问电脑IP文件夹下的文件，（WiFi

工具简介:spy-debugger移动端h5调试工具（浏览器/嵌入app都可调试）内部集成了weinre、node-mitmproxy、AnyProxy；无需usb连接；支持http/https；安装：

关于spy-debugger一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。

mac和window是一样的1.安装npminstall-gspy-debugger建议使用淘宝的缘来安装2.运行spy-debugger会输出//这是我的IP地址机在当前网络下的IP地址为：192.168.2.138node-mitmp

npminstallspy-debugger-gMac下sudonpminstallspy-debugger-g三分钟上手第一步：手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）第二步：命令行输入spy-debugger

4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。

4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。

spy-debugger安装、调试步骤安装命令（先通过nrm切源，切到cnpm）：注：如果安装过程中出现如下错误，问题出在安装到一半的node_modules文件夹下，将该spy-debugger目录下该文件夹删除后

spy-debugger真机调试转载：https://www.jianshu.com/p/833397313de1Spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre

写在前面：在以往的开发过程中，我所遇到的问题：公司项目是一个HybirdApp，前端H5页面内嵌在APP里，完成开发后，进行联调的时候如果出现错误，很难定位到问题出现在哪里。因为在APP里，我不知道js代码执行到了哪里、看不到console.log输出、看不到接口的请求与相应。以往联调遇到问题，我解决问题的思路：(1)首先我会分析是接口问题，还是前端js代码的问题(有时候是真的不知道错在哪了)；(

首先介绍一下调试工具spy-debugger神器废话不多说，开始正文........首先npmispy-debugger-g,这个操作相信大家都会（mac版需要在命令前加sodu）启动spy-debugger

这样再打开页面就会多出一个vConsole的按钮，点击可以打开查看：控制台，网络请求，页面元素，cookie/session/localstorage，除了不能在代码打断点调试，活生生一个本地调试的样子2、spy-debugger

window系统），下载exe文件，下一步下一步就会安装成功第一步：安装:npminstallspy-debugger-g第二步：手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）第三步：命令行输入：spy-debugger

日常的web开发过程中，有时页面空白了，我们要看看是不是页面代码报错了导致渲染中断或有时样式不符合预期效果，我们又要看看是否受到附近的元素影响，这个时候把安卓设备连接电脑debug往往是一个有效快捷的好方法。然而，并非每次问题都能通过上面这种方法解决，因为偶尔会有些ios设备上的特殊问题（大部分是样式上的）在安卓无法重现，在Mac上可以用Xcode或Safari调试，但是这些在Windows上就行

背景我们开发微信或者移动端的混合开发时，需要在移动端看到效果，但时候有的时候会出现意想不到的结果，这时候需要我们像是在chrom或者其它浏览器中调试了，但是移动端的又没法像浏览器那样按F12调试，这时候我们就不知道该怎么办才好，想着要是移动端浏览器或者微信内嵌浏览器要是能调试就好了，之前我们的APP使用混合开发，在安卓显示一切正常，但是在苹果上不显示，而且后台访问正常就是不现实，干着急没办法。网上

关于spy-debugger一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。

学会抓包的必要性熟练掌握了抓包不仅能快速定位出问题，还能分析网络请求，以及一些前端逻辑的问题导致接口多次触发等现象。所以一个合格的前端一定要会抓包，而且还要熟练掌握抓包工具，比如可以通过抓包工具些慢速网络，处理慢速网络时的一些交互，更重要的一点是，还可以用抓包工具配置页面的访问跳转，做混合开发时的一些测试页面。抓包工具有哪些比较熟悉的是Mac上用Charles,Windows上用Fiddler。关

简介移动端调试一直都是一个痛点，因为移动终端对于我们来说是一个黑盒，它无法像PC端一样，我们可以通过F12很方便的调出开发者工具。在开发中经常会遇到同样一份代码在某个型号的手机上运行出现错误，其他手机都好好的，开发的时候Chrome上也没有报错。如果没有调试工具这种情况下我们就很难定位问题，接下来的主题就是介绍如何使用spy-debugger+Charles进行移动端调试。安装第1步：全局安装sp

真机调试之spy-debugger1.关于spy-debugger一站式页面调试，抓包工具。

MAC下安装：sudonpminstallspy-debugger-g操作步骤第一步手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）第二步使用window10下的powershell,命令行输入spy-debugger

关于spy-debugger一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。

spy-debugger调试、抓包工具操作手册Spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码。

微信浏览器中调试微信中访问的肯定都是httpURL，所以可以直接使用spy-debugger，也可以使用

spy-debugger移动端浏览器调试工具页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设

4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。

spy-debugger一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。具有以下特性

spy-debugger原理是集成了weinre，简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试

4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。5、自动忽略原生App发起的https请求，只拦截webv

首先以为是babel转码问题，结果不是，以为是promise问题，vue-router连续重定向问题，结果都不是，最后终于找到一个比较方便的调试工具：spy-debugger，步骤都有；如果证书下不下来

项目地址在github上：https://github.com/wuchangming/spy-debugger关于spy-debugger一站式页面调试、抓包工具。