使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices

简介: 我使用的手机是三星A9 ,其他安卓手机方式也相同,电脑是win 10 系统。第一步首先打开手机的开发者模式,确保usb调试和通过usb验证应用程序保持打开状态,如图所示:第二步,最好是电脑和安卓手机都连接了谷歌浏览器第三步,打开电脑上的谷歌浏览器,调出控制台,我们点击More tools,再选择在之后的页面中,如图所示选项必须打对勾。

我使用的手机是三星A9 ,其他安卓手机方式也相同,电脑是win 10 系统。

第一步首先打开手机的开发者模式,确保usb调试和通过usb验证应用程序保持打开状态,如图所示:

img_8b0a353ab027803596895736adacd865.png

第二步,最好是电脑和安卓手机都连接了谷歌浏览器

第三步,打开电脑上的谷歌浏览器,调出控制台,

img_bd7760030ccd78181993fd27c8928ed2.png
img_1f9b1debd5e39c4472fa262b5cb45516.png

我们点击More tools,再选择

img_3fd6bdfa92eb81a789ab13eb1b55cbfd.png

在之后的页面中,如图所示选项必须打对勾。

img_4daebdf2e5da6a17ce92f874d75dc447.png

然后用数据线连接电脑和手机,手机就会弹出一个连接提示,你点是就可以了,连接成功就会跟上图中红色箭头标注的一样,出现带绿色小圈的你的手机型号。

第四步,在电脑上的谷歌浏览器输入这个网址chrome://inspect/,就会出现如下图页面

img_26d54034f0b9602a6e3ff05ce80e9864.png

第五步,打开你手机上的谷歌浏览器,输入你想要调试的网页,我一般都是把网页放到我的本地服务器,在手机浏览器上输入我的本地网址,如果是一个百度页面的例子

img_c12f0505529a9588a6885c31d0575f26.png

最后一步,我们点击inspect就可以审查手机页面了,审查方法就跟审查PC网页一样了。

img_4fdcc266d7e1d69a87b4d9248bfb9a8f.png

以上,欢迎大家提供更多更好的想法。

相关文章
|
22天前
|
Web App开发 前端开发 JavaScript
Chrome 浏览器中执行 JavaScript
Chrome 浏览器中执行 JavaScript
26 0
|
5天前
|
SQL 关系型数据库 MySQL
|
1天前
|
Web App开发 前端开发 JavaScript
前端必备的浏览器调试技巧
【7月更文挑战第18天】 Chrome开发者工具是前端调试的关键,包括快捷键Ctrl+Shift+I/Cmd+Option+I打开它,DOM和CSS调试如编辑元素、样式,JS调试如断点、条件断点和监视变量,网络请求分析,性能评估如Lighthouse和性能面板,及截图、模拟设备等实用技巧,助力开发者提升效率。
8 1
|
10天前
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
10天前
|
Web App开发 缓存 监控
如何使用 Chrome DevTools 进行网页性能优化?
如何使用 Chrome DevTools 进行网页性能优化?
|
15天前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
15天前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
17天前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
9 0
|
18天前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
24 0
|
2月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
76 0