大家好，今天来为大家分享手机端谷歌浏览器调试的一些知识点，和手机chrome浏览器调试模式的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

本文目录

1. 如何借助谷歌浏览器调试手机app
2. 如何在手机上调试网页
3. 谷歌调试工具怎样查看手机横屏的网页
4. 如何在移动设备上调试html5开发的网页
5. 移动端手机调试的几种方法
6. 手机浏览器可以像电脑一样F12调试吗

一、如何借助谷歌浏览器调试手机app

1、首先确保电脑手机上都已经安装谷歌浏览器，电脑上已经安装手机驱动软件用数据线连接手机和电脑

2、打开手机开发者选项，打开usb调试

3、点谷歌浏览器右上角菜单按扭，选“更多工具”，选“检查设备”

4、这时浏览器就会显示已连接到电脑上的手机

5、在手机打开手机谷歌浏览器，打开要调试的网页，这里电脑端就会显示手机上打开的网页列表

6、在电脑上你可以通过这里刷新手机上的网页，给手动上打开新网页，设置当前网页，当然最重要的是点“inspect”就可以打开开发都工具了！

7、然后就能使用开发者工具像调试电脑上打开的网页一样调试手机上打开的网页了

二、如何在手机上调试网页

1、可以使用手机端调试工具，如Chrome DevTools，可以在手机上检查网页的HTML、CSS、JavaScript等内容，并实时调试网页布局、样式、功能等。

2、拓展：此外，还可以使用模拟器来调试网页，只需要在电脑上安装模拟器，然后在模拟器上安装手机操作系统，就可以在模拟器上操作手机，调试网页。另外，还可以使用远程调试工具，如Weinre，可以让电脑和手机在同一局域网内，让电脑端的调试工具连接到手机上，从而实现网页的调试。

三、谷歌调试工具怎样查看手机横屏的网页

1、可以在Screen设置模拟的屏幕方面的东西，设置分辨率，屏幕尺寸。

2、可以在 User Agent设置客户端Agent

3、可以在 sensors设置感应等，模拟触屏操作。

4、配置好之后，点击 Emulate。开始进行仿真。

5、（选择Device需要点击emulate)其余选项是在修改后自动改变。

6、可以在 screen中，点击分辨率中间的互换按钮就可以了。

7、使用Chrome浏览器调试，配置好调试设置之后，可以自由输入网址查看在移动设备上的现实情况。

8、F12打开开发者模式，左上角有个手机屏幕的图标，点击一下即可。

四、如何在移动设备上调试html5开发的网页

通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。

2.1先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）

2.2再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：

3.3点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：

如上3.3图所示，此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：

1.1【设置】>【关于手机】>【版本号（Build number）】，对版本号这一项连点7下（这是官方文档里的说法）就会提示“你已成为开发者”。

1.2再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。

这块比较麻烦，因为要装一下Android的SDK。

2.1下载Android SDK，并解压，我把整个adt目录放在了/Users/David/adt/这里。

2.2设置环境变量。打开终端在David路径下（形如 DaviddeMacBook-Pro:~ David$）输入 open.bash_profile，如果文件存在则会打开，如果不存在则再输入touch.bash_profile创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools，关闭保存。最后在终端里输入 source.bash_profile来更新环境变量使其生效。终端里输入 adb出现命令帮助信息就是成功了。

2.3在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote。

3.1在手机上的Chrome里打开想要调试的网页，用数据线连接手机和电脑（我的是Mac。唉～我只是强调平台的不同，不要误会）。

3.2打开电脑上的Chrome，在地址栏里输入 about:inspect选中【Discover USB Devices】前面的复选框。出现下图画面（点击查看大图）：

4.1你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】，或者在浏览器中输入 localhost:9222打开手机正在浏览的网页列表，如下图：

4.2点击上图中的网站缩略图，就会跳转到Google的一个代理链接（链接可能被墙……，挂代理）就会打开如下图所示的控制台（点击查看大图）：

4.3这就和电脑上网页调试没什么差别了，鼠标经过DOM节点，手机上的布局同样也会高亮起来：

五、移动端手机调试的几种方法

很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者是进行断点调试。

1、Chrome DevTools（谷歌浏览器）的模拟手机调试

3、Chrome DevTools远程调试Android

这种调试方式不仅能用于模拟手机调试还是主要的PC端页面调试的方式，这里主要说用于手机调试。

a.谷歌浏览器的开发者工具，可以参照下图右键选择”检查“或者使用快捷键F12，打开开发者工具。

b.打开后看到类似如下界面的开发者调试界面，Elements可以查看文档元素，Console可以在线调试js和查看输出结果，Sources可以调试JS和查看依赖资源，Network查看所有的网络请求等等。

c.如果没有需要模拟的机型怎么办？可以增加，点开机型设置面板，选择edit，然后可以在右方修改展示机型，如下：

a.使用数据线将 iPhone与 Mac相连

b.iPhone开启 Web检查器（设置 -> Safari -> 高级 -> 开启 Web检查器）

c.iPhone使用 Safari浏览器打开要调试的页面（以兰亭单品页为例）

d.Mac打开 Safari浏览器调试（菜单栏 —> 开发 -> iPhone设备名 -> 选择调试页面）

如果你的菜单栏没有“开发”选项，可以到左上角 Safari -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单。

e.在弹出的 Safari Developer Tools中调试。

经过如上步骤就可在 Mac端调试 iPhone上 Safari运行的页面了。

a.在 Chrome浏览器地址栏中输入  chrome://inspect/#devices 并回车，就可以打开 Inspect调试界面，此时我们勾选Discover USB devices 选项便可以看到设备列表。

b.然后打开手机中开发者选项并打开 USB调试开关（具体方法自行百度，不同手机有一定区别），使用数据线将手机连接到电脑上，我们就可以在设备列表中看到自己的设备。

c.这时，打开手机上的Chrome浏览器，随便打开一个网址（以兰亭单品页为例），设备列表中你的设备下便会出现你打开的页面。

e.接下来你便可以和调试 PC界面一样通过 Chrome进行你所需要的调试，你在左侧屏幕上做的一切操作和你的手机上的操作会始终保持同步，如果你嫌左边这块多余，也可以关闭 Toggle Screencast只保留控制台本身。

六、手机浏览器可以像电脑一样F12调试吗

1、您的提问无法实现，目前手机端不支持查看网页源码。

2、手机浏览器只有功能类设置的功能

3、没有像chrome等PC端口浏览器F12查看网页源码的设置功能。

4、您可以在电脑端上使用浏览器的F12开发者工具调试页面。

5、注：部分电脑打开F12是需要组合键：FN+ F12。

6、通常前端程序员在按照UI效果图编辑网页时，不可能一口将全部的代码全部写好，通常情况是编写边调，经过反反复复的调试后才能达到要求的效果，这时候用Chrome浏览器的F12开发者工具能形象直观的帮助程序员调试自己的代码，用好F12能显着提高开发者的工作效率，加快调试的速度。

7、在使用某些程序，比如word文档的时候，按下F1就可以调出帮助信息，可以帮助解决使用过程中遇到的难题，不过个人感觉实际用处不大。

8、这个也是经常需要用到的按键。如果想要对某个文件、文档、图片、视频等等命名，点击目标，然后按下F2就可以快速命名了，工作效率大大提高，实在是懒人必备操作。

9、凤凰网—电脑键盘上 F1到 F12的正确用法

关于手机端谷歌浏览器调试，手机chrome浏览器调试模式的介绍到此结束，希望对大家有所帮助。