spy-debugger
微信调试,各种WebView样式调试、手机浏览器的页面真机调试。便捷的远程调试手机页面、抓包工具,支持:HTTP/HTTPS,无需USB连接设备。
Top Related Projects
An interactive TLS-capable intercepting HTTP proxy for penetration testers and software developers.
A desktop debugging platform for mobile developers.
A fully configurable http/https proxy in NodeJS
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
- Install spy-debugger globally:
npm install spy-debugger -g
- Start the spy-debugger server:
spy-debugger
-
Configure your mobile device to use the computer's IP address and port 9888 as a proxy.
-
Open the URL provided by spy-debugger in your computer's browser to access the debugging interface.
-
Navigate to your mobile web page on the mobile device to start debugging.
Competitor Comparisons
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.
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.
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
å ³äºspy-debugger
ä¸ç«å¼é¡µé¢è°è¯ãæå å·¥å ·ãè¿ç¨è°è¯ä»»ä½ææºæµè§å¨é¡µé¢ï¼ä»»ä½ææºç§»å¨ç«¯webviewï¼å¦ï¼å¾®ä¿¡ï¼HybridAppçï¼ãæ¯æHTTP/HTTPSï¼æ éUSBè¿æ¥è®¾å¤ã Â
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代ç ã让页é¢è°è¯æ´å æ¹ä¾¿ã
Top Related Projects
An interactive TLS-capable intercepting HTTP proxy for penetration testers and software developers.
A desktop debugging platform for mobile developers.
A fully configurable http/https proxy in NodeJS
HTTP, HTTP2, HTTPS, Websocket debugging proxy
Highly scalable realtime pub/sub and RPC framework
Node.js debugger based on Blink Developer Tools
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot