safari和chrome开启网页检查器的方法

本教程详细讲解iPhone和安卓手机如何开启Chrome/Safari远程调试功能，包含网页检查器设置、USB调试开启等完整步骤，助你轻松解决移动端网页调试难题，适合前端开发者和程序员学习。

手机远程调试完整教程

一、iPhone开启Chrome远程调试

1. 打开Chrome浏览器，点击底部菜单栏
2. 进入【设置】→【内容设置】
3. 开启"网页检查器"开关
   ✅ 完成后即可使用Web Debug X进行调试

二、iPhone开启Safari调试

1. 进入手机设置→搜索"Safari"
2. 下滑找到【高级】选项
3. 启用"网页检查器"功能

三、安卓开启Chrome调试

1. 设置→关于手机→连点7次版本号激活开发者模式
2. 返回搜索【开发者选项】
3. 开启"USB调试"功能
   ⚠️ 注意：不同品牌手机路径可能不同

四、自己开发的App开启网页检查器允许调试

1. Objective C语言开发的App对webkit实列进行下面设置

 if (@available(iOS 14.0, *)) {
    webView.inspectable = YES;
}

2. Swift语言开发的App 对webkit实例进行下面设置允许网页检查器

if #available(iOS 14.0, *) {
    webView.isInspectable = true
}

3. java开发的app对全局静态变量进行设置允许网页检查器

// 在Application或主Activity中启用调试
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

4. Kotlin开发的App 对webkit实例进行下面设置允许网页检查器

// Application级别启用调试
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true)
}

五、mac或者windows上 chrome调试模式运行的方法
使用命令行的方式启动chrome，并且指定参数

chrome.exe --remote-debug-port=9222 --user-data-dir=chromedatadir

⚠️ 注意：如果运行多个chrome，则–user-data-dir的值每个要不一样， –remote-debug-port值不能一样，否则会端口冲突

手机远程调试开启和网页检查器开启的视频教程

下一步

使用Web Debug X调试移动页面