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

本文目录

1. 如何将电脑端谷歌浏览器的界面显示为手机版效果
2. 如何模拟手机浏览器
3. 手机浏览器可以像电脑一样F12调试吗
4. 如何借助谷歌浏览器调试手机app
5. 手机谷歌浏览器隐藏边框
6. 如何在手机上调试网页
7. 谷歌浏览器vue调试方法介绍

一、如何将电脑端谷歌浏览器的界面显示为手机版效果

我们在使用电脑版谷歌浏览器的时候有没有想过让其显示成手机版的效果了？今天小编就告诉大家如何将电脑端谷歌浏览器的界面显示为手机版效果。

1.首先我们在电脑中打开谷歌浏览器。

2.进入主界面之后我们点击右上方如图所示的图标。

3.在弹出的窗口中我们点击更多工具。然后会弹出一个新的小窗口，我们点击开发者工具。

4点击之后会进入如图所示的界面。我们点击上方如图所示的手机图标。

5.此时我们即可看到网页显示的是手机版本了。

6.我们还可以点击手机类型，切换不同手机类型的界面。

7.点击如图所示位置的图标是竖向变成横向。

二、如何模拟手机浏览器

chrome模拟手机总共有四种方法，原理都一样，通过伪装User-Agent，将浏览器模拟成Android设备。以下标星的为推荐方法。

右击桌面上的Chrome浏览器图标，在弹出的右键菜单中选择“复制”，复制一个图标副本到桌面。右击该副本，选择“属性”，打开相应的对话框，在“目标”文本框的字符后面添加以下语句：“–user-agent=”Android””，如下图：

注意user前面是两个“-”，并且“chrome.exe”与“–user”之间有一个空格。确定之后，打开这个新建的Chrome快捷方式，输入3g.qq.com就可以浏览到像手机里打开一样的页面了。

这时可以新建一个用户，就不影响原来用户访问的时候也是访问的手机版。

开始–运行中输入以下命令，启动浏览器：

chrome.exe--user-agent="Mozilla/5.0(Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1(KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

chrome.exe--user-agent="Mozilla/5.0(iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10(KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"

这种方法仅供特殊情况下使用，因为重启Chrome将不能恢复正常User-Agent，所以是一次性。

插件可以很方便切换各种user-agent，很方便，但是可能会稍微影像性能。

User-Agent Selector地址：

从上图可以看到，还有很多类似的插件，其实功能都大同小异。

打开chrome开发者工具，按F12（r32版本），然后找到右上角的齿轮按钮，打开设置面板，选择Overrides，勾上Show‘Emulation’ view in console drawer（在控制台视图中显示“仿真”）。

然后关闭设置面板，选择Elements面板（非Console就可以），找到右上角打开控制台面板，选择控制台面板里的Emulation面板，右边有很多选项，选择一个点击Emulate就可以了，Reset按钮能恢复到默认状态。

打开仿真后，打开，即可看到如下的手机下的界面

这种方法简单好用，而且不需要重启，推荐这种方法。

注意：以上第一种和第二种方法都需要将全部打开的chrome窗口关闭，再打开才能起作用。

和chrome一样安装插件修改user-agent的方法，搜索wmlbrowser、XHTML Mobile Profile以及User Agent Switcher三个插件

2.火狐响应式设计+修改user-agent*

最近的火狐自己添加响应式设计功能和3D试图都很棒，打开火狐自己的控制台（非firebug），找到右上角的响应式设计按钮。

但我们看到打开QQ的站点并未被自动引到QQ的移动页面，这样只对响应式设计的界面起作用，对想QQ这样云端判断，返回不同页面的并不适应，这里就要配合上面的方法，再改下user-agent，即可实现类似chrome的调试功能。

安装的方法参考这里：

安装完成后可打开如下界面，可用里面的浏览器打开网站即可，但这种方法打开的是电脑网站，而不是手机网站，也就是他的user-agent不是手机的，故对响应式界面起作用，对判断user-agent的网站不起作用，访问qq，baidu等返回的都是电脑界面。

三、Opera*浏览1.修改user-agent

和chrome和firefox类似，可自行安装插件，自opera12之后，opera改用webkit内核，故可安装chrome的插件，也可自行在opera的商店中搜索插件

User Agent Changer下载：

2.Opera Mobile Emulator+ dragonfly*

下载适合自己的版本，安装完毕会开如下界面：

左侧选择平台，右侧选择参数，选择完毕点击启动，如下的几面，用过手机opera的朋友会很熟悉，就是手机opera

关于opera mobile emulator的更详细介绍参看文章末尾参考资料的相关内容。

但此时，还是只能看而已，不能调试模拟器里的网站，这里需要dragonfly配合以实现调试，由于opera12后换了内核，不能安装dragonfly了，所有你需要一款opera12的浏览器，和dragonfly的离线包，配置好后具体如何连接请参看这里

全部设置好后即可实现在电脑上调试手机网页，如下图所示：

opera mobile emulator下载地址：

做安卓开发的肯定都知道安卓模拟器，这是谷歌官方的提供的开发环境，能模拟安卓环境，还可切换各个版本，可下载配置好的环境，然后打开eclipes，直接打开AVDM，穿件一个AVD，然后start，如下图：

要等一大会时间，会打开模拟器，和安卓环境一样，打开里面的浏览器测试即可。但我的浏览器打不开不知道为什么，郁闷的很啊。

下载地址：

这也是一款模拟器，可自行搜索，本人安装后电脑就卡死了，可能我的电脑配置不行吧，看介绍还是不错的。

在线只能测试界面的视觉效果，不能调试，但也是很不错的。

非常不错，速度也很快，界面很简洁，支持多种平台。

需要java环境支持，单一平台，opera出品，速度很快。

说实话弄了半天也没弄出来，大大的鄙视下吧，但是能测试的平台很全面。

以上列出了多种方法，各有利弊，希望大家选择适合自己的方法，本人推荐chrome自带模拟器和opera mobile emulator+ dragonfly的方法。因为这两种方法，接近真是手机环境，又能调试css和js。

当然文中没有提到的还有最好的方法就是你有一台手机，那就太好了，配合远程调试，是最最理想的办法。

三、手机浏览器可以像电脑一样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的正确用法

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

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

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

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

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

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

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

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

五、手机谷歌浏览器隐藏边框

1、首先进入谷歌浏览器，打开所需要浏览的网页。

2、其次点击右上角的展开标志，在展开选项中，找到带有全屏标志的图案，点击即进入全屏模式。

3、最后进入全屏模式后，没有了任务栏，只是浏览网页是一种不错的体验，使用相同方法也可以撤销此次操作。

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

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

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

七、谷歌浏览器vue调试方法介绍

1、进入verder下的 manifestjson，修改persistent为 true，保存刷新浏览器扩展程序即可使用运行vue程序，即可在控制台中看到此调试工具vue devtools在用vue做的网站上会变亮但不能查看其结构只有在本地运行的项目才。

2、工具谷歌浏览器步骤打开开发者工具，可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者直接记住这个快捷方式 Ctrl+Shift+I或者Ctrl+Shift+J直接打开控制台，或者直接按F12打开的开发者工具就。

3、使用的工具谷歌浏览器测试的网站可以按照下面的方法进行调试1f12打开开发者工具，控制台介绍Elements页面元素，可以进行编辑，保存后实时查看页面效果Network查看js模拟的。

4、在谷歌浏览器中按f12，然后选下面的scripts，就可以调试js代码了，点击左边的列数可以设置断点，再点击一下，取消断点。

5、首先请打开“谷歌浏览器”废话，然后打开一个网页，按“F12”会出现一个控制台，找到一个叫做“Sources”，点击它 OK，如果你的页面现在已经加载过JS脚本的话，那么应该可以看到一些JS文件了然后你可以在左侧侧栏的序号。

6、在js代码里面写一行debugger标记，之后再浏览器界面打开F12，之后会自动进入断点状态，F11是单步调试，F8是跳过断点。

7、首先是启动谷歌浏览器的开发者工具的方法在浏览器右上角的选项中点击，下拉菜单选工具开发者工具，快捷键CTRL+shift+I打开开发者工具后，在浏览器下方出现一个调试面板左侧是网页HTML调试查看，右侧是CSS代码调试。

8、这里主要介绍三种方法1Chrome DevTools谷歌浏览器的模拟手机调试 2IOS Safari真机调试 3Chrome DevTools远程调试Android这种调试方式不仅能用于模拟手机调试还是主要的PC端页面调试的方式，这里主要说用于手机调试a。

9、谷歌浏览器使用方法1百度搜索“谷歌浏览器”点击下载开始安装2双击“谷歌浏览器”下载程序，五秒后直接安装成功，并且自动打开浏览器界面3安装完后，我们来看一下关于“谷歌浏览器”都有哪些功能，点击最上面的。

10、本文会教你如何在桌面电脑手机或平板电脑上使用Google Chrome网页浏览器掌握了基础要点后，可以再继续学习如何添加扩展程序进行个性化设置和在电视上使用Chrome方法1在Windows电脑使用Chrome1在电脑上安装Chrome如果你还未安装。

11、新颖惊艳的Impressjs内容展示效果库，类似3D版 PPT Kinect+WebGL其他各种有用的库等此外今年还新增了专门面向移动设备的页面更多的谷歌浏览器运用方法可以参考。

12、1chrome被你人为重置了2清理软件将chrome所有设置重置3为防止chrome设置在用户不知情的情况下被篡改，google的新政策会在甚至异常的情况下自动重置。

13、更换成videojs插件一直提示无法找到视频文件正确路径，无法播放原因在于视频播放需要在DOM加载完毕，并且获取到后端返回的视频播放地址之后才可以正确播放video，英语单词，主要用作名词形容词动词，作名词时意为视频。

14、F12，打开Elements，定位到该元素，点击右侧Event Listeners可以看到绑定的事件。

15、审查元素里是浏览器解析完的代码比如说某个元素比如图片，文字，按钮在当前页面代码的出现位置，是不能看的所谓的网页具体位置。

16、远程调试是用来调试运行在安桌上的浏览器中的网页，本地网页可以用WebStorm发布成Web服务，就可以用谷歌浏览器的远程调试来调试了如没有特别需求，本地网页可以在Chrome中直接调试的。

17、关于谷歌应用问题1由于谷歌之前已经退出中国大陆市场，所以在中国大陆上市的三星Android系统手机均不内置googlePlayStore以及其它的Google应用软件 2谷歌相关应用程序如googlePlayStore在中国大陆上市的手机中无法安装使用。

手机版谷歌浏览器调试的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于手机版谷歌浏览器调试模式在哪、手机版谷歌浏览器调试的信息别忘了在本站进行查找哦。