首先你的电脑安装了nodejs，npm
安装方法很简单：百度nodejs（window系统），下载exe文件，下一步下一步就会安装成功
第一步：安装: npm install spy-debugger -g
第二步：手机和 PC 保持在同一网络下（比如同时连到一个Wi-Fi下）
第三步：命令行输入：spy-debugger
没有自动打开浏览器，就按命令行提示用浏览器打开相应地址。
浏览器打开画面如下图：
第四步：设置手机的 HTTP 代理，代理 IP 地址设置为 PC 的 IP 地址，端口为spy-debugger的启动端口号（也就是第三里红框里的数字）。
第五步：用手机浏览器访问你要调试的页面即可。任何浏览器都行（亲测QQ浏览器，安卓手机自带浏览器，微信内置浏览器可用）
如果出现类似下图：（框里是你要调试的地址，并且颜色是绿色的）！那么恭喜你成功了！说明链接成功，可以像浏览器查看元素一样的调试了
如果链接不上，检查一下步骤，然后在刷新俩端的浏览器试试
通常在移动端页面调试时，除了移动端chrome和safiri,几乎对其他浏览器无法调试。在测试过程中，通常解决兼容性占了大部分时间，对那些手机厂商自带浏览器和第三方浏览器深恶痛绝，为什么不使用统一标准。
spy-debugger 移动端浏览器调试工具 页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。
1.安装 需要安装node，在这不做介绍了，然后安装 spy-debbugger 依赖包到全局环境。（这里使用了npm,yarn也不错）
npm install spy-debugger -g2.PC端运行 打开终端运行
spy-debugger 当出现下图所示即表示在PC端运行成功，记住IP和node-mitmproxy启动端口，后面需要使用，上图这个样子就成功启动了，浏览器打开 http://127.0.0.1 :65443，后续调试的的功能都在这个页面上操作。
3. 设置手机端HTTP代理 首先电脑和手机保持在一个网络下，或连接同一个wifi。然后到手机端设置所连wifi的代理。进入wlan列表，
4.手机端下载并安装证书（首次使用安装） 手机端第三方浏览器输入 http://s.xxx （不要用自带浏览器和微信浏览器），下载证书到本地。
安卓端安装证书的两种方式：
其一：设置——WiFi——高级设置——安装证书
其二：设置——更多设置——系统安全——从存储设备安装证书
IOS端安装证书的方式看下面链接就行：
https://www.jianshu.com/p/d31...
5.用手机浏览器访问你要调试的页面即可 下图就是用手机端浏览器打开页面，targets会显示监听到打开的页面。
菜单栏的 Elements 、Resources、Network、Timeline、Console和chrome的开发工具项类似。
体验肯定没PC端浏览器的好，但能够满足大部分调试的需求。
来自 https://segmentfault.com/a/1190000018087888
前言 PC端web页面调试比较容易，这里主要说几种移动端调试的方法，从简单到复杂、从模拟调试到远程调试，大概分为几部分：
1、Chrome DevTools（谷歌浏览器）的模拟手机调试
2、weinre(web inspector remote)远程调试工具
3、微信的“web开发者工具”，集成了Chrome DevTools和weinre，做的比较好
4、Chrome DevTools远程调试Android和iOS页面
5、Eruda——手机网页前端调试面板
阅读说明
本文不是小白文，需要一定前端基础才能看懂；此外，本文并不是调试教程，很多细节并没有截图或者描述的很清楚，就如我说的已经默认阅读者懂得一些基本的调试方法；
我这里主要是对几种调试方式进行汇总，方便自己也方便他人看完文章之后知道更多的调试方式；如果遇到哪一步自己看不懂可以百度或者评论区留言，谢谢！
1、Chrome DevTools模拟手机调试
直接使用谷歌浏览器的开发者工具，可以参照下图，也可以使用快捷键F12或者ctrl+shift+I；个人觉得不管是哪个浏览器，直接先按下F12，一般都可以打开开发者工具，打不开再说嘛。
这种调试方式不仅能用于模拟手机调试还是主要的PC端页面调试的方式，这里主要说用于手机调试。
打开后看到类似如下界面的开发者调试界面，Elements可以查看文档元素，Console可以在线调试js和查看输出结果，Sources可以调试JS和查看依赖资源，Network查看所有的网络请求
在浏览器地址栏输入要调试的页面地址，选择模拟设备，然后就可以选择要调试的js调试了，右侧面板中有调试操作按钮；在Application面板中可以看到应用存储的数据Cookies什么的
如果没有需要模拟的机型怎么办？当然是增加了，打开DevTools的设置面板，左图中的Setting点开会出现右图，如下：
2、weinre(web inspector remote)远程调试工具 weinre其实是在待调试的页面中嵌入了一个特定的js，这样页面才能被weinre监测到并能打开调试面板；要注意weinre的调试面板不能调试JS,也不支持打断点调试，仅能用于调试页面样式，使用场景有限；
根据自己需要来选择吧，具体的使用安装过程参考：http://blog.csdn.net/freshlover/article/details/42640253 ；由于我使用的较少，也并不推荐这款工具，所以只是作为介绍和了解放在这里；如果想
对weinre深入了解的自己参考链接中的内容琢磨吧。
3、微信的“web开发者工具” 微信的web开发者工具，集成了谷歌的DevTools和weinre，可以说是上面两点的集合，对于那些微信公众号里面使用的H5网页，这个是最好的选择；
这个工具调试一般性的网页就和谷歌浏览器调试一样，看到的调试面板也差不多；但是如果要调试微信相关的功能比如：JS-SDK，权限列表等就必须使用这个工具了
工具下载地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN
除了使用url模拟调试外,微信的web工具也能对安卓手机进行远程调试，目前最新版还不支持iOS远程调试，打开设备监视面板：
打开后看到如下界面，可以看到有一台华为设备已经连接，远程调试要注意两点：
1、手机和电脑使用usb连接，手机要开启usb调试模式(不同手机不一样)
2、手机上安装最新版谷歌浏览器并打开
然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面，这里不细说这个了，也没必要细看，下面会详细说明
再看看微信的移动调试，iOS提供的只有普通代理测试，Android除了代理测试，还有X5 Blink内核调试；但是并不是所有手机都支持X5 Blink；所以普遍还是使用代理调试
手机的wifi网络配置好代理后，点击开始调试，出现监控界面，发现其实就是使用的weinre来实现的，不过微信对其做了改进，相比直接使用 weinre 有以下优点：
1、无须手工在页面中加入 weinre 调试脚本，这点很方便
2、可以在 weinre 的网络请求页卡Network中，看到完整的http请求log，并且没有只能看到ajax的局限
但是也有弊端，由于是微信开发的工具，移动调试只能调试微信App中打开的页面而且并不是所有能在微信中打开的网页都能调试，怀疑是工具内部做了过滤
重启微信后，在微信中访问页面，可以被监测到，然后可以调试网页样式了，在Network页卡中能看到每个请求的参数与响应结果
总之，如果调试页面是微信中的页面(一般就是公众号)使用微信提供的工具效率很高；如果是一般浏览器中的页面也可以使用微信的Chrome DevTools但最好不用weinre
4、Chrome DevTools远程调试Android和iOS页面 电脑上安装新版谷歌浏览器，然后地址栏输入chrome://inspect会打开设备监视页面，这里可以监视到iOS和Android设备，如果界面和图中不一致请安装最新版浏览器
Android:
前提：
1、手机和电脑使用usb连接，手机要开启usb调试模式(不同手机不一样)
2、手机上安装最新版谷歌浏览器并打开
会发现设备监视页面多出了一个华为设备，并且能看到当前手机上谷歌浏览器打开的网页的连接
a):可以在这里输入手机要打开的url然后open，手机上显示的当前页面就会改变
b):inspect表示开始调试当前页面，会打开调试面板(重要)
c):focus tab，表示让手机显示当前这个连接
d):reload表示重新加载页面，也就是刷新
e):close表示关闭当前手机显示的页面
接下来，点击inspect开始调试页面，注意如果google浏览器不能翻|墙的话，这个调试页面是打不开的，可以百度修改hosts文件翻|墙
然后就可以像调试PC端网页一样远程调试手机网页了
iOS(window系统上，如果是macbook系统忽略此部分):
可以参考：http://www.cnblogs.com/kelsen/p/6402477.html
前提：
1、电脑安装iTunes软件，不然苹果手机不能正常被识别，安装好后数据线连接手机和电脑
2、打开手机的设置——>Sarafi——>高级——>Web检查器——>启用(默认是关闭的，将其打开)
3、下载ios-webkit-debug-prox 代理(32位或者64位)，其作用就是在Chrome和Sarafi之间建立了一个代理，便于电脑的Chrome检测手机Sarafi打开的页面
4、在cmd中执行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html，命令中-f是以谷歌内置的监视器来调试(默认使用远程的)
启动后会监听9222端口，然后看到连接上了一台名为jiba的iOS设备，括号中为设备的UDID；然后看谷歌浏览器是否检查了这个端口，右图中有9222端口即可，没有就手动添加
此时打开手机Sarafi浏览器，打开百度首页，发现浏览器能检测到，没看到就刷新这个监视界面，一般来说会在3秒内自动出现
点击inspect同样出现了调试面板，如下，发现iOS调试的面板不能看到手机屏幕在电脑上的投影，不过这并不影响调试；但是可能会遇到在调试js时断点不生效的问题，
如果很不幸遇到这个问题的话，将图中红框中的按钮连续点击两次——先禁用断点再启动即可恢复端点调试功能，不知道为什么，猜测是这个过程中恢复了断点的状态；这个问题很奇葩。
到这里使用Chrome调试iOS和Android就都完了，这种使用谷歌浏览器的方式，在Android上依赖于手机谷歌浏览器，在iOS上依赖Sarafi浏览器，受到具体软件的限制；不过可以理解，毕竟远程调试不如模拟调试简单
5、Eruda——手机网页前端调试面板 eruda是什么？正如标题所言，是用来在手机上调试页面的，注意是在手机上不是在电脑上；前面说的几种调试方式都是在电脑上模拟调试或者远程调试手机页面，但eruda是直接在手机上调试页面。
有什么好处？如果非要说好处就是能够直接在手机上打开类似PC端开发者面板一样的调试面板，主要用途是当PC端调试手机页面和手机上运行时效果不一致时可以直接在手机上调试。
示意图(手机上调试效果图)：
具体资料：https://www.oschina.net/p/eruda
目前我用的比较少，但是不失为一种值得推荐的调试工具。总的来说，一般开发者都是直接在PC上调试页面（不管是PC端页面还是手机端页面），因此在开发过程中推荐使用Chrome DevTools或者微信web开发者工具来调试，
当然有同学说我用的是360浏览器，其实不管你用什么浏览器除了内核差异，调试模式基本都和Chrome DevTools差不多；这里我要说的是一般调试页面时直接使用PC端来调试就可以了，但是发现在真机上运行效果和预期不一致
则可以采用Eruda来实现真机调试进而定位并解决问题。
以上工具并不是互相独立存在的，很有可能需要多种方式联合调试来解决一个问题，毕竟我们不能把自己框死在一个工具里，应该扬长避短；
最后，由于本人是后台工程师，对前端是处于业余爱好，经验有限，肯定还有很多我不知道的优秀调试工具或者调试方式，知道的还请联系我，大家互相促进提升。
分类: web
来自 https://www.cnblogs.com/xy-nb/p/web.html
使用Weinre远程调试Localhost（以及HTTPS Too） 年03月17 日 ，2015年 | 评论
调试移动网站/应用程序真的很痛苦。 没有Javascript的调试器，没有控制台日志，无法检查html / css，等等。
有时我认为我正在调试IE6的旧版本，我必须 alert在每行代码中找出实际问题所在。 如果你也遇到同样的问题，你就会知道痛苦。
最近，谷歌的Chrome来救援。 他们通过在chrome mobile中引入远程调试支持来缓解这种痛苦。 Chrome远程调试是一个真正的救星，我们在移动浏览器中获得连接到网页的相同chrome devtools。 而且，我们可以像在桌面浏览器中那样进行调试。
太棒了！
但Android浏览器调试的问题仍然存在。 Chrome远程调试可以连接到仅在Chrome浏览器（移动设备）中加载的网页。 如果我们需要调试默认浏览器，我们必须使用任何其他调试工具。 在这篇文章中，我们将讨论另一种称为 Weinre的 精彩远程调试工具 。
安装Weinre Weinre以npm包的形式提供。 如果您已在系统中配置了npm，请使用以下命令全局安装weinre：
npm -g install weinre
你可以在 这里 找到更多安装weinre的说明 。
现在运行命令 weinre --help以查看所有可用选项。
usage: weinre [options]
version: 2.0.0-pre-HH0SN197
options:
--httpPort port to run the http server on default: 8080
--boundHost ip address to bind the server to default: localhost
--verbose print more diagnostics default: false
--debug print even more diagnostics default: false
--readTimeout seconds to wait for a client message default: 5
--deathTimeout seconds to wait to kill client default: 3*readTimeout
--boundHost can be an ip address, hostname, or -all-, where -all-
means binding to all ip address on the current machine要在默认配置中运行weinre，请使用该命令 weinre -all-。
在移动浏览器中访问localhost 访问开发机器的最简单方法是使用IP地址和端口。 假设应用程序在端口9002上运行。要在浏览器中打开它，首先，我们必须找出运行应用程序的系统的IP地址。 使用 ifconfigOSX / Linux和 ipconfigWindows中 的命令 查找IP地址。 现在导航到浏览器窗口并使用 IP_ADDRESS：PORT 查看正在运行的应用程序。
在某些情况下，我们需要使用本地主机名访问应用程序。 这些包括主机头验证，从JavaScript ..etc解决跨域请求。 通常，使用 IP_ADDRESS：PORT 组合 时会限制这些事情 。
访问移动设备中的本地主机名是我们的第一个障碍。 我找到了一篇关于如何解决这个问题的优秀文章。 我不想在这里解释所有这些，所以让我们按照这个链接：
http://egalo.com/2012/05/29/testing-mac-web-site-using-local-hostname-on-mobile-device/
完成后，请回来查看下一部分。
我们开始远程调试 让我们使用自定义端口和您的IP地址运行weinre。
weinre --httpPort 1234 --boundHost 192.168.2.109这将在端口1234中启动weinre服务器。
2015-02-19T13:56:42.520Z weinre: starting server at http://192.168.2.109:1234http://192.168.2.109:1234在浏览器中 打开链接 。 我们主要对以下链接感兴趣：
Access Points
--------------
debug client user interface: http://localhost:1234/client/#anonymous
documentation: http://localhost:1234/doc/
Target Script
--------------
You can use this script to inject the weinre target code into your web page.
http://localhost:1234/target/target-script-min.js#anonymous将目标脚本添加到需要检查的页面，并使用调试客户端用户界面链接。 调试客户端与Chrome开发工具非常相似。
HTTPS支持？ 截至目前，我们的目标脚本不支持https。 这样做的问题是，如果您的站点运行在https协议上，并且您需要在任何页面中注入weinre目标脚本，浏览器将阻止该脚本。 因为weinre脚本是通过http协议加载的，如果您的网站是https，浏览器不会阻止任何http资源。
我们可以通过使用另一个名为 ngrok的 服务来解决这个问题 。 基本上，ngrok是一个隧道代理，它将隧道暴露给任何Web服务器，并将端口暴露为子域。 由于ngrok支持https，因此通过https使用ngrok隧道连接weinre服务器相当容易。
让我们看看这是如何完成的：
安装ngrok
npm install -g ngrok启动weinre服务器
weinre --httpPort 1234 --boundHost 192.168.2.109运行指向weinre服务器的ngrok
ngrok 192.168.2.109:1234这将输出如下：
ngrok (Ctrl+C to quit)
Tunnel Status online
Version 1.7/1.7
Forwarding http://74bd4fb7.ngrok.com -> 192.168.2.109:1234
Forwarding https://74bd4fb7.ngrok.com -> 192.168.2.109:1234
Web Interface 127.0.0.1:4040
# Conn 0
Avg Conn Time 0.00ms现在， https://74bd4fb7.ngrok.com是你的https隧道到weinre服务器。 打开浏览器并导航到 192.168.2.109:1234。 按照替换后，该页面提供的设置说明 192.168.2.109与 https://74bd4fb7.ngrok.com支持HTTPS。
注意：
如果您在目标脚本中遇到任何Javascript错误，则可能需要修改 target-min-script.js。 要做到这一点，首先找出weinre路径：
cd `which weinre`/../web/target
vi target-min-script.js现在在编辑器中，搜索以下文本
pattern = /(http:\/\/(.*?)\/)/ ; 用下面的替换它并保存。
pattern = /(https?:\/\/(.*?)\/)/ ; 现在您可以在https页面中使用weinre。
摘要 Weinre是一个强大的远程调试工具。 在本指南中，我们了解了如何配置和使用weinre来调试本地网站。 我希望这可以帮助那些努力使用Android浏览器的人。 我还想提一下，有一个在线托管的weinre服务器可用。 您可以查看 http://debug.build.phonegap.com/ 。 唯一的缺点是它不支持https页面。
谢谢阅读。 让我知道反馈和任何评论。
来自 https://www.undefinednull.com/2015/03/17/remote-debugging-localhost-with-weinre/
