手机网页调试利器: Chrome

新开发的网页需要在手机或是模拟机上运行测试,

可以借助 Chrome提供的手机网页预览程序进行简单调试。查看 制作的网页是否能够适合各种手机型号使用。

下面所以下如何使用Chrome调试多类型手机网页。

首先 下载Chrome 浏览器。

在你要调试的网页或是本地页面中。按F12 打开调试器。(即开发者模式)

//==============================================

时间: 2024-12-14 13:58:39

手机网页调试利器: Chrome的相关文章

手机网页调试·清除浏览器缓存的方法

在手机里调试网页的时候,总是为清除缓存烦恼.特别是QQ浏览器.最后甚至有同学开发出了Android下一键清除清除各种浏览器缓存的APP,但需要root,且每次耗时不短.最后经过尝试,发现了一个方便.有效的方法.那就是利用HTTP的响应头,强制浏览器不缓存资源. NodeJS 中的实现方法: NodeJS中可以通过设置一下方法设置响应头 res.setHeader("CacheControl", 'no-cache'); res.setHeader("Expires"

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

Eruda——手机网页前端调试面板

在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种类型的浏览器APP........还好移动端的相对一致点,但是往往都会有一些各种各样的坑,这时候就蛋疼了,明明chrome调试工具中是正常的, 一到某个浏览器中就炸了,怎么办,又无法像在chrome中使用调试工具进行调试,只能通过alert()弹窗来调试,有什么办法可以像PC上那样清晰,可视化的调试

手机网站调试神器之chrome控制台

现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网.于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓.对于我们Web前端工程师来说,了解并掌握手机编程的任务也是刻不容缓.下面为大家推荐一款比较不错的手机调试软件chrome. 经常调试手机网站的码农们,一定会为手机调试软件而发愁,找不到比较合适的手机网站调试工具.我也是无意中发现chrome控制台的软件设置中就具备了各种手机屏幕的尺寸.我们只要用它就很方便完成调试工作了. 下面介绍一下chrome调

使用weinre远程调试手机网页(nodejs、phoneGap)

本调试方式需要wifi环境和webkit浏览器. weiner主页:http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 一.配置调试服务器 (一).nodejs搭建调试服务器(以windows为例)1.安装node.js安装程序下载:http://nodejs.org/#download本文安装在“F:/nodejs/”目录. 2.测试安装是否成功打开CMD,切换到nodejs所在的安装目录.输入如下命令测试node.js

手机前端开发调试利器 – vConsole

我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息. 如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了. 作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志? 答案是肯定的. vConsole:一个轻量.可拓展.针对手机网页的前端开发者调

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

【外行学IT】手机网页自适应之rem和viewport

在写手机网页时,对于像素的问题会非常困惑,初学者很多时候会因为那么一个小点的问题解决不了,或者无法理解透彻就放弃了学习. 我在学习写手机网页时也困惑了许久,出现过下面的问题: 图片素材按照640px*330px像素设计,放入img,并且img设置了铺满全屏style: .img{ width:100%; height:16.5rem; ] PS:我将html设置了 html{ font-size:20px; } 所以按照rem的算法,img的高度应该是330px/20px=16.5rem(rem

整理:手机端网页调试方案

(本文前身是技术分享的ppt,因此有些图直接是ppt导出的.画的图全是原创,转载请注明,谢谢.) 在手机端网页开发的特定阶段,需要查看手机端的界面.交互与体验.2011年时,开发时有很大麻烦: 相应的静态文件在测试服务器上,没有上线,需要绑定hosts而手机端直接绑定hosts是需要越狱/root的 有的手机浏览器根本不认hosts文件,如uc 手机端的调试工具匮乏断点调试.查看变量.查看样式等都很困难 在电脑端改变UA和屏幕大小,并不能简单的模拟手机端的情形.比如触摸的事件处理 在2012年后