Convert Figma logo to code with AI

wuchangming logospy-debugger

微信调试,各种WebView样式调试、手机浏览器的页面真机调试。便捷的远程调试手机页面、抓包工具,支持:HTTP/HTTPS,无需USB连接设备。

7,525
834
7,525
108

Top Related Projects

36,462

An interactive TLS-capable intercepting HTTP proxy for penetration testers and software developers.

13,333

A desktop debugging platform for mobile developers.

A fully configurable http/https proxy in NodeJS

14,293

HTTP, HTTP2, HTTPS, Websocket debugging proxy

Highly scalable realtime pub/sub and RPC framework

Node.js debugger based on Blink Developer Tools

Quick Overview

Spy-debugger is a remote debugging tool for mobile web pages. It allows developers to debug mobile web applications on their computer by intercepting and analyzing network traffic from mobile devices. This tool is particularly useful for debugging issues that only occur on mobile devices.

Pros

  • Easy setup and usage, requiring minimal configuration
  • Supports both iOS and Android devices
  • Provides real-time debugging capabilities for mobile web pages
  • Includes features like weinre integration for DOM manipulation and console logging

Cons

  • Limited to debugging web applications, not native mobile apps
  • Requires a stable network connection between the mobile device and computer
  • May have performance impacts on the mobile device during debugging
  • Documentation is primarily in Chinese, which may be challenging for non-Chinese speakers

Getting Started

  1. Install spy-debugger globally:
npm install spy-debugger -g
  1. Start the spy-debugger server:
spy-debugger
  1. Configure your mobile device to use the computer's IP address and port 9888 as a proxy.

  2. Open the URL provided by spy-debugger in your computer's browser to access the debugging interface.

  3. Navigate to your mobile web page on the mobile device to start debugging.

Competitor Comparisons

36,462

An interactive TLS-capable intercepting HTTP proxy for penetration testers and software developers.

Pros of mitmproxy

  • More comprehensive and feature-rich, offering a wide range of tools for intercepting and analyzing HTTP/HTTPS traffic
  • Supports multiple platforms (Windows, macOS, Linux) and can be used as a command-line tool, GUI application, or Python library
  • Actively maintained with frequent updates and a large community

Cons of mitmproxy

  • Steeper learning curve due to its extensive feature set
  • Requires more setup and configuration for specific use cases
  • May be overkill for simple debugging tasks, especially on mobile devices

Code comparison

mitmproxy:

from mitmproxy import http

def request(flow: http.HTTPFlow) -> None:
    if flow.request.pretty_url.endswith(".js"):
        flow.request.headers["X-Custom-Header"] = "Modified"

spy-debugger:

const SpyProxy = require('spy-debugger').SpyProxy;
const proxy = new SpyProxy({
    port: 9888
});
proxy.createProxy();

Summary

mitmproxy is a powerful, multi-platform tool for intercepting and analyzing HTTP/HTTPS traffic, offering extensive features and flexibility. It's suitable for advanced users and complex scenarios. spy-debugger, on the other hand, is more focused on mobile web debugging, providing a simpler setup and user interface. While mitmproxy offers more capabilities, spy-debugger may be more appropriate for quick and straightforward mobile debugging tasks.

13,333

A desktop debugging platform for mobile developers.

Pros of Flipper

  • More comprehensive debugging platform with support for multiple platforms (iOS, Android, React Native)
  • Extensive plugin ecosystem for customization and additional functionality
  • Active development and support from Facebook

Cons of Flipper

  • Steeper learning curve due to its extensive features
  • Heavier resource usage, potentially impacting performance on lower-end devices
  • Requires more setup and configuration compared to spy-debugger

Code Comparison

Flipper (JavaScript):

import {Plugin, FlipperPlugin} from 'flipper';

class MyPlugin extends FlipperPlugin {
  static title = 'My Plugin';
  // ... plugin implementation
}

spy-debugger (JavaScript):

const spyDebugger = require('spy-debugger');

spyDebugger.start({
  port: 9888,
  weinrePort: 9000
});

Summary

Flipper offers a more robust and feature-rich debugging experience with cross-platform support and an extensive plugin ecosystem. However, it comes with a steeper learning curve and higher resource requirements. spy-debugger, on the other hand, provides a simpler and more lightweight solution for mobile web debugging, focusing primarily on weinre integration and proxy functionality. The choice between the two depends on the specific project requirements, target platforms, and desired level of debugging capabilities.

A fully configurable http/https proxy in NodeJS

Pros of AnyProxy

  • More comprehensive and feature-rich proxy tool
  • Supports HTTPS decryption and custom CA certificates
  • Offers a web-based interface for easier management

Cons of AnyProxy

  • Steeper learning curve due to more complex setup
  • Requires more system resources to run
  • May be overkill for simple debugging tasks

Code Comparison

AnyProxy:

const AnyProxy = require('anyproxy');
const options = {
  port: 8001,
  rule: require('./myRuleModule'),
  webInterface: {
    enable: true,
    webPort: 8002
  }
};
const proxyServer = new AnyProxy.ProxyServer(options);
proxyServer.start();

Spy-debugger:

const spyDebugger = require('spy-debugger');
spyDebugger({
  port: 9888,
  weinrePort: 9999,
  autoDetectBrowser: true,
  externalProxy: null
});

Summary

AnyProxy is a more powerful and flexible tool, offering advanced features like HTTPS decryption and a web interface. However, it may be more complex to set up and use compared to Spy-debugger. Spy-debugger, on the other hand, is simpler and more focused on mobile web debugging, making it easier to use for specific tasks but potentially limiting for more advanced use cases.

14,293

HTTP, HTTP2, HTTPS, Websocket debugging proxy

Pros of Whistle

  • More comprehensive feature set, including network proxying, debugging, and mock data
  • Cross-platform support (Windows, macOS, Linux)
  • Extensive plugin system for customization and extensibility

Cons of Whistle

  • Steeper learning curve due to more complex configuration options
  • Potentially overwhelming for users who only need basic debugging features
  • Requires more setup and configuration for simple use cases

Code Comparison

Whistle configuration example:

# Whistle rule
/api/ localhost:3000
/static/ file://E:\project\static

Spy-debugger usage example:

// Start spy-debugger
spyDebugger.start({
  port: 9888,
  weinrePort: 9000
});

Summary

Whistle offers a more feature-rich and flexible solution for network debugging and proxying, while Spy-debugger focuses on mobile web page debugging with a simpler setup. Whistle's extensive capabilities come at the cost of increased complexity, whereas Spy-debugger provides a more straightforward approach for specific use cases. The choice between the two depends on the user's requirements and familiarity with network debugging tools.

Highly scalable realtime pub/sub and RPC framework

Pros of SocketCluster

  • Designed for real-time, scalable applications with built-in pub/sub features
  • Supports horizontal scaling and clustering out of the box
  • Offers both client-side and server-side SDKs for various platforms

Cons of SocketCluster

  • More complex setup and configuration compared to spy-debugger
  • Steeper learning curve for developers new to real-time architectures
  • May be overkill for simpler projects that don't require extensive scaling

Code Comparison

SocketCluster (server-side):

const socketClusterServer = require('socketcluster-server');

const httpServer = require('http').createServer();
const scServer = socketClusterServer.attach(httpServer);

scServer.on('connection', (socket) => {
  console.log('Client connected');
});

spy-debugger:

const spyDebugger = require('spy-debugger');

spyDebugger({
  port: 9888,
  weinrePort: 9000,
  autoDetectBrowser: true,
  externalProxy: null,
  webInterface: null
});

While SocketCluster focuses on building scalable real-time applications, spy-debugger is primarily a debugging tool for mobile web development. SocketCluster offers more comprehensive features for building distributed systems, whereas spy-debugger provides a simpler solution for mobile web debugging and inspection.

Node.js debugger based on Blink Developer Tools

Pros of node-inspector

  • More mature and established project with a longer history
  • Supports debugging of Node.js applications running in various environments
  • Integrates well with Chrome DevTools for a familiar debugging experience

Cons of node-inspector

  • No longer actively maintained (last commit in 2017)
  • May have compatibility issues with newer Node.js versions
  • Requires more setup and configuration compared to spy-debugger

Code Comparison

node-inspector:

var inspector = require('node-inspector');
inspector.open(9229, 'localhost', true);

spy-debugger:

const spyDebugger = require('spy-debugger');
spyDebugger.start({
  port: 9229,
  weinrePort: 8080
});

Key Differences

  • spy-debugger focuses on mobile web debugging, while node-inspector is more general-purpose
  • spy-debugger offers features like weinre integration and HTTPS proxy, which are not present in node-inspector
  • node-inspector provides a more traditional Node.js debugging experience, while spy-debugger is tailored for mobile web development

Use Cases

  • Choose node-inspector for debugging Node.js applications in various environments
  • Opt for spy-debugger when working on mobile web development and needing features like weinre integration and HTTPS proxy

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

关于spy-debugger

一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。  

npm npm Build Status

Language: English

特性

1、页面调试+抓包
2、操作简单,无需USB连接设备
3、支持HTTPS。
4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5、自动忽略原生App发起的https请求,只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。【PS:由于 iOS 15 调整代理协议,iOS 15 已无法检测请求是否浏览器发起】
6、可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)

使用案例

页面编辑模式

启动命令:spy-debugger -w true

weiner页面调试界面

anyproxy抓包界面

安装

Windows 下

    npm install spy-debugger -g

Mac 下

    sudo npm install spy-debugger -g

三分钟上手

第一步:手机和PC保持在同一网络下(比如同时连到一个Wi-Fi下)

第二步:命令行输入spy-debugger,按命令行提示用浏览器打开相应地址。

第三步:设置手机的HTTP代理,代理IP地址设置为PC的IP地址,端口为spy-debugger的启动端口(默认端口:9888)。

  • Android设置代理步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
  • iOS设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动

第四步:手机安装证书。**注:手机必须先设置完代理后再通过(非微信)手机浏览器访问http://s.xxx(地址二维码)安装证书**(手机首次调试需要安装证书,已安装了证书的手机无需重复安装)。iOS新安装的证书需要手动打开证书信任

第五步:用手机浏览器访问你要调试的页面即可。

自定义选项

端口

(默认端口:9888)

spy-debugger -p 8888

设置外部代理(默认使用AnyProxy)

spy-debugger -e http://127.0.0.1:8888

spy-debugger内置AnyProxy提供抓包功能,但是也可通过设置外部代理和其它抓包代理工具一起使用,如:Charles、Fiddler。

设置页面内容为可编辑模式

该功能使页面内容修改更加直观方便。 (默认: false)

spy-debugger -w true

内部实现原理:在需要调试的页面内注入代码:document.body.contentEditable=true。暂不支持使用了iscroll框架的页面。

是否允许weinre监控iframe加载的页面

(默认: false)

spy-debugger -i true

是否只拦截浏览器发起的https请求 【PS:由于 iOS 15 调整代理协议,已无法检测请求是否浏览器发起】

(默认: false)

spy-debugger -b true

有些浏览器发出的connect请求没有正确的携带userAgent,这个判断有时候会出错,如**UC浏览器**。这个时候需要设置为false。大多数情况建议启用默认配置:true,由于目前大量App应用自身(非WebView)发出的请求会使用到SSL pinning技术,自定义的证书将不能通过app的证书校验。

是否允许HTTP缓存

(默认: false)

spy-debugger -c true

更多

  • 修复weinre在node.js V7版本会崩溃的bug

  • 对weinre在页面document ready事件前,无法打印console.log日志进行了增强修复。

  • 增强weinre打印未捕获异常(Uncaught Exceptions)功能。

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

NPM DownloadsLast 30 Days