How to Enable Web Inspector in Safari and Chrome
This tutorial provides a detailed guide on enabling remote debugging for Chrome/Safari on both iPhone and Android devices. It covers web inspector settings, USB debugging activation, and complete setup steps to help you easily solve mobile web debugging challenges. Perfect for frontend developers and programmers.
Complete Mobile Remote Debugging Tutorial
1. Enabling Chrome Remote Debugging on iPhone
- Open Chrome browser, tap the bottom menu bar
- Go to [Settings] → [Content Settings]
- Turn on “Web Inspector” switch
✅ Ready to use WebDebugX for debugging
2. Enabling Safari Debugging on iPhone
- Go to Settings → Search “Safari”
- Scroll down to [Advanced] option
- Enable “Web Inspector” function
3. Enabling Chrome Debugging on Android
- Settings → About Phone → Tap Build Number 7 times to enable Developer Mode
- Go back and search [Developer Options]
- Enable “USB Debugging” function
⚠️ Note: Path may vary by device brand
4. Enabling Web Inspector for Custom Apps
For Objective-C Apps (WebKit):
1if (@available(iOS 14.0, *)) {
2 webView.inspectable = YES;
3}
For Swift Apps (WebKit):
1if #available(iOS 14.0, *) {
2 webView.isInspectable = true
3}
For Java Apps (WebView):
1// Enable debugging in Application or Main Activity
2if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
3 WebView.setWebContentsDebuggingEnabled(true);
4}
For Kotlin Apps (WebView):
1// Application-level debugging enable
2if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
3 WebView.setWebContentsDebuggingEnabled(true)
4}
5. Running Chrome in Debug Mode (macOS/Windows)
Launch Chrome via command line with parameters:
1chrome.exe --remote-debugging-port=9222 --user-data-dir=chromedatadir
⚠️ Note:
- Use different –user-data-dir values for multiple Chrome instances
- –remote-debugging-port values must differ to avoid conflicts
Video Tutorial: Enabling Remote Debugging & Web Inspector
Next Steps
- Web 前端开发调试实战,从桌面浏览器到真机 WebView 的全链路可视化调试指南
- 移动端WebView调试 iOS App网络抓包与请求分析工具对比
- 移动端网页调试实战,存储调试工具对比与最佳实践
- 前端工具全景实战指南,从开发到调试的效率闭环
- 前端开发工具有哪些?从写代码到真机调试的全套实践指南
- 移动端调试全攻略,从 Chrome 到 WebDebugX 的真机排查实践
- WebView 调试实战指南,从看不见的错误,到精确定位的解决之道
- 前端调试实战全解析,从浏览器到真机的可见化问题定位体系
- WebView 调试工具全解析,解决“看不见的移动端问题”
- 前端开发调试全攻略,从浏览器到 WebView 的系统化思维与实战工具
- 移动端网页调试实战,性能分析工具对比与最佳实践
- H5 移动端调试全流程指南,从浏览器模拟到真机 WebView 调试的完整实践
- iOS WebView 调试实战与最佳实践 从 WKWebView 到跨平台真机调试的完整指南
- 远程网页调试工具实战:跨端前端调试的核心利器与最佳实践
- 移动端如何调试?前端工程师的真机调试全流程与工具指南
- 如何在 Windows 电脑上调试 iOS 设备上的 Safari?完整方案与实战经验分享
- 移动端网页怎么调试?从浏览器到真机的全流程实战指南
- WebView 远程调试全指南,跨端真机调试的完整解决方案
- iOS WebKit Debug Proxy 深度解析与替代方案,跨平台远程调试的新思路
- 常见问题
- 安装与注册
- 快速上手
- Wifi调试移动端页面
- iOS Safari调试
- iOS Remote Debug Proxy教程
- iOS WebKit调试
- iOS Chrome调试
- Android WebView调试
- Android Chrome调试
- WebDebugX简介
- 调试本机浏览器
- 网络调试
- 性能分析
- safari和chrome开启网页检查器的方法
- Web Debug X Introduction
- Quick Start