关于谷歌chrome调试小技巧

最新推荐文章于 2024-06-24 16:13:00 发布
原创 最新推荐文章于 2024-06-24 16:13:00 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#移动端调试 #显示手机外壳 #响应式调试

本文介绍如何在移动端使用Chrome开发者工具进行设备调试，包括显示手机外壳和将数据以表格形式输出的方法。强调了网络环境和Chrome版本的重要性。
  1. 移动端显示手机外壳调试
    （1）按f12， 打开开发者工具， 点击图中蓝色按钮或者按快捷键 ctrl + shift + M 进入设备调试。
    在这里插入图片描述
    （2）点击下图中的三个原点， 选择 show device frame 操作， 即可显示外壳。
    在这里插入图片描述

警告： 一定要翻墙， 否则不显示， 另外chrome 版本要6+以上。

  1. 把object或array输出为表格
    let args = {…};
    console.table(args);

  2. debugger
    debugger 的效果是当浏览器执行到这一段语句的时候，自动被断点。

参考文档：
你所不知道的Chrome调试技巧（上）
你所不知道的Chrome调试技巧（下）

前端Chrome调试技巧最全汇总
u012148903的博客
04-09 2655
console占位符描述%cCSS样式占位符，值就是CSS样式，如下示例，可用来自定义log的样式%oor%O打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。%dor%i打印整数。支持数字格式化。例如，console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字：Foo 01。%s打印字符串。%f打印浮点数。支持格式化，比如 console.log("Foo %.2f", 1.1) 会输出两位小数：Foo 1.10。
截屏 Device Frame Generator
01-22
软件名称：Device Frame Generator APK名称：com.f2prateek.dfg 最新版本：3.1.2 支持ROM：4.0及更高版本 界面语言：英文软件 软件大小：21.40 M 更新日期：3个星期前 开发者：f2prateek 应用简介 Device Frame Generator是一款截屏辅助工具，可以将你的截屏添加上设备外框，支持的型号有： * Nexus S : 480*800 * Galaxy Nexus : 720*1280 * Nexus 4 : 768*1280 * Nexus 5 : 1080*1920 * Nexus 7 : 800*1280 * Nexus 7 (2013) : 800*1280 * Nexus 10 : 1600*2560 * HTC One : 1080*1920 (by ATMOSF3AR) * HTC One X : 720*1280 * Samsung Galaxy Note : 800*1280 * Samsung Galaxy S III : 720*1280 * Samsung Galaxy Tab 2 : 600*1024
谷歌调试器
ccleidei的博客
10-22 689
chrome调试器 之 Element选项卡
Chrome浏览器devtools使用系列二：模拟不同设备和视口
zzyp1927314的博客
06-20 6417
本文讲解的版本信息如下，如果使用的版本和讲解的版本差距过大，可能会有不同的地方。本。
chrome开发者工具的小技巧
在路上
02-16 3712
Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。
谷歌浏览器调试手机外观
weixin_42645490的博客
12-14 6016
首先外观是这个样子的： 使用f12打开是大家都知道的，然后切换成手机模式，然后选择 就是标红框的这个，切换成show device frame 就可以，快去试试吧！
手机浏览器调试 --- 使用 PC 上的Chrome进行调试
热门推荐
不断成长的我
09-23 3万+
使用PC上的 Chrome 远程调试手机端的页面 工具准备 手机端：chrome for Android,；  PC端：安装谷歌浏览器(最好是最新版的开发者版本) USB 连接线, 也就是你充电器的那条线 开启调试模式 使用 USB 连接你的电脑，并开启调试模式。 使用 android 4.2 或以上的手机可能没有调试模式选项，可以找到 “设置 > 关于手机
使用Chrome调试JavaScript的断点设置和调试技巧
12-11
你是怎么调试 JavaScript 程序的？最原始的方法是用 alert() 在页面上打印内容，稍微改进一点...如果你精通 Eclipse 中的各种 Java 调试技巧，那么这里的概念都是类似。写作本文时使用的 Chrome 版本为 25.0.1
谷歌浏览器调试JavaScript小技巧
12-09
谷歌浏览器不仅仅可以用来上网，对于开发人员来说，它更像是一款强大的开发辅助工具。 工欲善其事必先利其器，接下来笔者给大家分享一些Chrome的使用方法。 假如读者了解如何在Chrome中添加JavaScript断点，那请继续...
不常见但很有用的chrome调试工具使用方法
最新发布
06-24 743
对于chrome调试工具，常用的是elements标签、console标签、sources标签和network标签。但实际上，还有一些不太常见但相当实用的方法可以提高网页调试效率。本文将详细介绍那些不常见的chrome调试工具使用方法。
【最佳实践】Chrome调试利器~移动端H5调试工具_chrome://inspect/#devices
一起寻找DX3906-探索未知
06-11 5620
Chrome调试利器~移动端H5调试工具_chrome://inspect/#devices
Chrome Frame离线版
12-22
Chrome Frame插件 离线版 找了很久的好资源
Google Chrome Frame 4.0.211.7
01-10
Google Chrome Frame 4.0.211.7 操作系统Windows 类别Chrome扩展 语言英语 (1 更多) 作者Google 大小 557KB 描述 Google Chrome Frame “谷歌浏览器内嵌框架”（Google Chrome Frame）是一款IE浏览器插件，它允许在你不放弃微软浏览器的前提下，享受Chrome所带来的一切优越性能。 只要你正在浏览的网页在其代码中添加了对这款小工具的支持（Google的网页就已经添加了），“谷歌浏览器内嵌框架”就能顺利工作。 插件的安装简便、迅速，你在使用IE时，几乎不会觉察到任何变化。事实上，除非正在浏览的网页不支持这款插件，不然，你还是能像以前一样浏览网页。 对于想要获取Chrome的出色性能，又舍不得放弃IE的你来说，使用“谷歌浏览器内嵌框架”是最简单、最便捷的方式。
ios和android 界面调试,通过chrome浏览器调试手机页面(IOS和Android)
weixin_39788382的博客
05-29 535
开发PC页面的时候使用chrome浏览器的开发者工具，可以很容易的捕获到页面的dom元素，并且可以修改样式，方便调试，但是手机上却很麻烦，因为手机上没有办法直接打开开发者工具查看元素。其实可以通过将设备连接到PC，使用PC的开发者工具检测一、针对android设备1、在android设备上开始开发者模式2、将设备连接到PC，在chrome浏览器地址栏输入：chrome://inspect/#dev...
如何使用chrome浏览器调试？
为了而努力
08-26 6380
做前端开始的，基本有很多人都在使用chrome浏览器的调试功能，我基本上是全部使用chrome浏览器进行调试的。IE的调试，实在是不敢恭维。下面我简单分享一下chrome浏览器的简单使用。一些比较高级的调试用法，还没有掌握，等掌握了之后，再好好写笔记。 下面是分享给同事的技术分享。 在chrome浏览器中打开http://localhost:3000，按F12，或者右击->单击【检
关于谷歌浏览器调试时切换到移动设备没有外观
jzw7512651的专栏
12-28 7538
关于谷歌浏览器调试时切换到移动设备没有外观。
在Chrome浏览器上调试特定机型的屏幕效果
荷塘月色
02-14 6502
我们现在开发网页基本上都是会开发成“响应式”的，而为了减少麻烦我们经常会在PC端直接进行测试手机端效果。这篇文章介绍的是如何在Chrome中添加指定机型的模拟机。
前端chrome浏览器调试总结
Li5306的博客
01-13 412
引言 “工欲善其事，必先利其器” 恩，这句话我觉得说的特别有道理，举个例子来说吧，厉害的化妆师都有一套非常专业的刷子，散粉刷负责定妆，眼影刷负责打眼影，各司其职，有了专业的工具才能干专业的事，这个灵感要来源于之前我想买化妆品时，店里的海报标语，由此联想到，如果你想在某个事情上做好，并且做的专业，那么你一定要把你的工具用好，这样才能事半功倍，我见过很多师兄师姐，他们写了很多代码，他们能够很快的完成工作，能够处理很多复杂的业务逻辑，但是对于浏览器的调试掌握的并不全面和熟悉，说说我自己吧，我的编程调试起源于自学
关于谷歌浏览器show device frame
Haines
09-14 4768
问题：打开手机模拟器，点击ishow device frame,不能正常显示手机外壳 解决：必需翻墙，点击刷新，即可正常显示。
谷歌Chrome开发者工具详解与调试技巧
谷歌开发API对于Web开发者来说是一个强大的工具集，尤其是Google Chrome开发者工具，它是内置在浏览器中的一个功能丰富的调试和分析平台。以下是这些工具的详细说明： 1. Google Chrome开发者工具：它是一个免费且...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值