使用chrome调试手机,平板,pc上各种浏览器上的页面

最新推荐文章于 2022-12-05 16:52:04 发布
VIP文章 最新推荐文章于 2022-12-05 16:52:04 发布
阅读量1.4w 收藏 2
点赞数 4
分类专栏： 浏览器 文章标签： 网站开发 Chrome developer tool
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/just_do_it2009/article/details/9000611
版权

使用chrome调试手机,平板,pc上多种浏览器的页面展示

作为web开发者，特别是现代web开发者，是否要调试手机，平板，电脑上的显示效果？chrome自带了这种很强大的神器

1、打开chrome（下面的步骤如果不成功，请先升级chrome浏览器）,打开一个页面 如http://www.baidu.com
2、按F12打开Developer Tools,之后点击developer Tools右下角的设置icon,如图

最低0.47元/天 解锁文章
just_do_it2009
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Chrome mobile for Android 连接PC版Chrome远程调试(Android 移动端连接PC版Chrome远程调试 )
小姜哥的技术博客
10-21 1503
博客搬家：由于各种原因，我现在的博客将首发于blog.mojijs.com， 可以百度搜索 “姜哥的墨迹技术博客” ， 或者 点击这里 本文地址http://blog.mojijs.com/post/152.html  Chrome mobile 连接PC版Chrome远程调试(Android 移动端连接PC版Chrome远程调试 ) 以前写过一篇文章 weinre，移动端远程调试
【Google Chrome】如何让浏览器显示手机网页
鸡窝
03-06 3万+
先前在网上爬文的时候看到过很多文章说在Chrome的快捷方式上加参数以达到显示手机网页的效果，总感觉有点不妥。 今天在老外网站上看到一篇文章，如何把各种浏览器变成手机模拟器，以达到显示手机网页的效果。这对于开发移动网页的童鞋是莫大的关怀，于是乎不敢独享。 首先贴上外网原文的地址，E文好的同学可以直接浏览。How to Change Your Browser’s User Agent Wit
JS使用Chrome浏览器实现调试线上代码
10-15
主要介绍了JS使用Chrome浏览器实现调试线上代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
PC端Chrome浏览器扩展程序 模拟手机浏览器
02-20
PC端Chrome浏览器扩展程序。用于模拟伪装成手机浏览器，实现从PC浏览器访问只能使用手机浏览器限制的网站。
Chrome浏览器常用快捷键
编程架构三分天下：分层、分治、分时序。
09-26 267
目录Chrome浏览器常用快捷键 Chrome浏览器常用快捷键 打开/关闭调试: F12 调试模式下切换到移动设备模拟器: Ctrl+Shift+M 打开无痕浏览模式: Ctrl+Shift+N
9102了，你还不会移动端真机调试？
weixin_34232617的博客
03-22 285
移动端调试困难 很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者是进行断点调试。有时，在移动端我们不得不借助于alert来调试，但是这样的调试方法效率极其低下，很多时候，都是靠经验，或者是靠排除...
Chrome模拟平板调试
weixin_30723433的博客
06-27 783
1. 按F12，打开开发者工具，右上角，点击红圈中的标志。然后在弹出的面板中点击'Emulation'。 2. 会看到左侧的四个选项卡 Device 设备、Screen 屏幕、User Agent 和 Sensors 传感器。 3. Device 不多说了，先选择是哪一款移动设备，从IPhone5 到 Samsung Galaxy Tab应有尽有。 Screen 注意一点...
使用chrome调试平板/手机网页
Linceo的博客
09-24 8588
1、VSCode插件 any-rule ：正则大全 Path Intellisense： 自动补全引入文件名 Document This： 可以自动为TypeScript和JavaScript文件生成详细的注释模板 file-size：在状态栏中显示当前文本文件的大小 Bracket Pair Colorizer: 根据不同颜色区分不同代码块 2、Chrome 插件 Allow CORS: Access-Control-Allow-Origin 允许CORS，你可以轻松地在 Web 应用程序中执行
Chrome模拟IOS/IPad/Android运行环境
qq_36222036的博客
12-05 2310
Chrome模拟IOS/IPad/Android运行环境
firefox/safari/chrome浏览器模拟iPad的userAgent的方法
我的地盘
04-21 8723
<br />在给 iPad 做的网页进行测试的时候，有时候需要在 PC 上模拟 iPad User Agent 去访问网页，今天就介绍下如何让 Firefox，Chrome，Safari 浏览器模拟 iPad User Agent。<br />iPad User Agent<br />首先 iPad 的 User Agent：<br />Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KH
Android 手机浏览器调试使用Chrome进行调试实例详解
08-31
主要介绍了Android 手机浏览器调试使用Chrome进行调试实例详解的相关资料,这里提供了实例，需要的朋友可以参考下
如何利用ipad随时随地开发代码
热门推荐
程序员石磊
04-21 4万+
今天，我将向你们展示如何设置iPad，让它成为你们的开发环境。虽然我不建议你用它来执行非常大的项目，但我可以肯定地说，小项目也可以很容易地执行。您可以自己继续测试环境的限制。 首先，我们将使用App Store上的一款iPhone和iPad都可以使用的免费应用程序。该应用程序名为iSH shell，运行Linux操作系统。因此，如果您不习惯Linux命令，我建议您学习基础命令。 我还建议您在继续学习本教程之前学习如何使用vim，因为我们将在iPad上使用vim作为我们的主要代码编辑器。Vim有一个陡峭的学.
使用谷歌浏览器调试手机网页
VFrank
11-21 1995
使用谷歌浏览器调试手机网页 方式1：控制台使用手机模拟器 方式2：这种方法仅供特殊情况下使用，因为重启Chrome将不能恢复正常User-Agent(需要将全部打开的chrome窗口关闭，再打开才能起作用) 模拟谷歌Android： chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexu...
如何在chrome浏览器上调试特定机型的屏幕效果
蜗牛的博客
09-25 9282
需求：有个项目只适配了手机，屏幕宽度大于手机尺寸是俩侧有灰色背景，现在要适配小米note4平板，如何精确适配？ 步骤： 1.打开chrome F12，点击设备切换按钮，点击上方的手机型号选择，点击下拉列表最下边的eDit 2.出现如下图界面 增加机型，填写数据 3.数据如何计算？ 1）比如小米note4平板，到小米官方商城查询可得下图。 2)计算device pixel...
chrome谷歌浏览器-DevTool开发者工具-详细总结
ddnet2000的博客
06-26 5971
一、概述 　　1.官方文档 　　2.打开方法： 　　3.前言： 二、九个模块： 　　1.设备模式Device Mode 　　2.元素面板Elements 　　3.控制台面板Console 　　4.源代码面板Sources 　　5.网络面板Network 　　6.性能面板Performance以前的版本叫Timeline 　　7.内存面板...
Chrome调试工具
HXL521666的博客
09-21 324
1.打开调试工具 打开Chrome浏览器，按下 F12键或者右击页面空白处点击检查 2.使用调试工具 ① ctrl+滚轮可以放大开发者工具大小。 ②左边是HTML元素结构，右边是CSS样式。 ③右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色 ④ctrl+0复原浏览器大小。 ⑤如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。 ⑥如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。 ...
在Chrome浏览器上调试特定机型的屏幕效果
荷塘月色
02-14 3964
我们现在开发网页基本上都是会开发成“响应式”的，而为了减少麻烦我们经常会在PC端直接进行测试手机端效果。这篇文章介绍的是如何在Chrome中添加指定机型的模拟机。
用谷歌浏览器来当手机模拟器
sunvince的专栏
03-19 1300
很多网站都通过User-Agent来判断浏览器类型，如果是3G手机，显示手机页面内容，如果是普通浏览器，显示普通网页内容。 谷歌Chrome浏览器，可以很方便地用来当3G手机模拟器。在Windows的【开始】-->【运行】中输入以下命令，启动谷歌浏览器，即可模拟相应手机的浏览器去访问3G手机网页： 谷歌Android：chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) App
chrome浏览器调试手机端h5页面
最新发布
05-08
但是开发手机端H5页面在不同的手机浏览器上会出现不同的问题，例如页面不兼容、加载速度慢等等。因此，我们需要使用Chrome浏览器来调试手机端H5页面。 首先，我们需要在chrome浏览器上安装“谷歌chrome浏览器开发者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值