小工具      在线工具  汉语词典  css  js  c++  java

Chrome开发及使用技巧总结

Web前端,软件工具,chrome,前端 额外说明

收录于:38天前

Chrome是程序员开发出来的神器,但是很多猿猴不知道或者没有正确使用它。今天我就教大家如何使用它快速高效地进行开发和调试。

代码格式化

有许多 css/js 代码将被缩小。您可以点击代码窗口左下角的 { } 标签,chrome 会为您格式化。

强制 DOM 状态

一些 HTML DOM 是有状态的,例如标签,它们具有活动、悬停、焦点和访问状态。有时候,我们的CSS会定义不同状态的样式。分析网页时,检查网页上DOM的CSS样式。 ,我们可以点击CSS样式上的:hov小按钮来强制这个DOM的状态。

动画片

现在网页上已经出现了一些动画效果。在Chrome的开发者工具中,通过右上角菜单中的更多工具=>动画调出相关选项卡。所以你可以慢动作播放动画(可以点击25%或10%),然后Chrome可以帮你录制动画。你可以拖动动画并再次绘制,甚至可以进行一些简单的修改。

直接编辑网页

在控制台中输入以下命令:

document.designMode = "on"

这样就可以直接修改网页上的内容了。

附:下面的屏幕截图还演示了如何清除控制台的示例。您可以键入clear()或按Ctrl+L(在Windows下)、CMD+K(在Mac下)

网络速度限制

您可以设置网络的访问速度来模拟慢速网络。

复制 HTTP 请求

这是我非常喜欢的一个功能。您可以在网络选项卡中单击 XHR 来过滤相关的 Ajax 请求,然后右键单击相关请求并从菜单中选择:复制 => 复制为 cURL,然后您可以转到命令行并执行curl 命令。这使得进行一些自动化测试变得很容易。

用手机抓拍一张照片

这可能有点无聊,但我认为这很有趣。

在设备显示中,首先选择一部手机,然后选择右上角的“显示设备框”,然后您将看到该手机的样子,然后在该菜单中选择“捕获快照”即可截取如下所示的屏幕截图手机。 。

设置断点

除了对Javascript源码设置断点调试外,你还可以:

在 DOM 上设置断点

选择一个 DOM 并在右键菜单中选择 Break on...。您可以看到以下三个选项:

为 XHR 和事件侦听器设置断点

在“源”页面中,您可以在右侧看到一堆断点。除了上面提到的为 DOM 设置断点外,还可以为 XHR 和事件监听器设置断点。图片如下:

关于控制台中的提示
DOM 操作

Chrome 将帮助您缓冲您查看过的 5 个 DOM 对象。您可以在控制台中使用 $0、$1、$2、$3、$4 直接访问它们。

也可以使用类似 jQuery 的语法来获取 DOM 对象,如:$("#mydiv")

您还可以使用 $$(".class") 来选择所有符合条件的 DOM 对象。

您可以使用 getEventListeners($("selector")) 查看 DOM 对象上的事件。

还可以使用monitorEvents($("selector"))来监控相关事件。例如:

monitorEvents(document.body, "click");
Console 中的一些功能

1)监控功能

使用monitor函数来监视一个函数,如下例

2)复制功能

复制函数可以将变量的值复制到剪贴板。

3)检查功能

检查功能允许您通过控制台跳转到需要检查的对象。喜欢:

更多的函数请参数官方文档 – 使用控制台/命令行参考

控制台输出

我们知道,除了console.log之外,还有console.debug、console.info、console.warn、console.error等不同级别的输出。另一个鲜为人知的功能是,在console.log中,您还可以向输出文本添加CSS样式,如下所示:

console.log("%c左耳朵", "font-size:90px;color:#888")

因此,可以定义一些相关的日志函数,例如:

console.todo = function( msg){
  console.log( '%c%s %s %s', 'font-size:20px; color:yellow; background-color: blue;', '--', msg, '--');
}
console.important = function( msg){
  console.log( '%c%s %s %s', 'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;', '--', msg, '--');
}

关于console.log中的格式,可以参考下表:

指标

输出

%s

格式化输出是一个字符串变量。

%i 或 %d

整型变量值的格式化输出。

%F

浮点变量值的格式化输出。

%o

格式化并输出 DOM 对象。

%O

格式化并输出 Javascript 对象。

%C

将 CSS 样式添加到以下字符串

除了console.log打印js数组之外,还可以使用console.table打印,如下所示:

var pets = \[
  { animal: 'Horse', name: 'Pony', age: 23 },
  { animal: 'Dog', name: 'Snoopy', age: 13 },
  { animal: 'Cat', name: 'Tom', age: 18 },
  { animal: 'Mouse', name: 'Jerry', age: 12}
\];
console.table(pets)
关于控制台对象

除了上面的日志记录功能之外,控制台对象还有很多功能,例如:

console.trace()可以打印出js函数调用栈

console.time() 和 console.timeEnd() 可以帮助您计算一段代码之间所花费的时间。

console.profile() 和 console.profileEnd() 允许您查看 CPU 消耗。

console.count() 允许您查看当前打印相同日志的次数。

console.assert(expression, object) 允许您断言表达式

这些东西都可以看看Google 控制台 API 的文档

其实,还有很多东西,你可以参看Google的官方文档 – Chrome 开发工具

. . .

相关推荐

额外说明

调试JS时遇到无限调试器怎么办?

我们在对一些网站进行JS逆向分析过程中,很有可能会遇到网站禁止开发人员使用F12进行网页调试,如果你打开就会遇到无限debugger的这个情况,当我们遇到这种情况,我们该如何进行避免无限debugger弹出呢?  解决方法: 可以直接在控制台输入以下代码

额外说明

学1妹的软件测试转行之路

年前,学妹蛋挞突然跟打了通电话,她说自己想转行IT行业做软件测试,但苦于不够了解这个行业,于是来找我取取经。 蛋挞毕业于某一本大学的农学专业,因为专业的特殊性她从毕业开始就一直有想转行的想法,但由于家里的原因一直未能如愿。刚毕业时,由于疫情环境加上专业特

额外说明

Android —— UI高级样式自定义

QQ 1274510382 Wechat JNZ_aming 商业互捧 QQ群538250800 技术搞事 QQ群599020441 技术合作 QQ群152889761 加入我们 QQ群649347320 纪年科技aming 网络安全 ,深度学习,嵌入式

额外说明

Python每日一练——字符串与正则表达式第八关:search的用法

面试题第八关: 第一部分——考点: search的用法 第二部分——面试题: 1.面试题一:请描述python正则表达式中的match和search的区别 2.面试题二:如果一个字符串中含有11位的手机号,请使用正则表达式找打第一个出现的手机号,并输出手

额外说明

hadoop使用combiner合并操作

前言 任务从MapperTask出来的时候,数据要暂存在一段缓存空间,然后ReducerTask再拉取这些数据进行处理,map到reduce中间的这一段操作,官方称作为 shuffle 通过前面的章节我们了解到,往往来说,MapperTask的任务数量是

额外说明

Windows10安装linux子系统WSL2

wsl2子系统简介 官方文档:https://docs.microsoft.com/en-us/windows/wsl/ WSL(Windows Subsystem for Linux)使开发人员可以直接在未经修改的Windows上运行GNU / Lin

额外说明

KMP 字符串匹配算法笔记_ python 实现

0 引言: KMP用于, 在文本字符串 (或称文本串,字符串)s 中, 找出模式串(或称匹配串) pattern 出现的位置; 举例: 在文本串:aabaabaafa 中查找是否出现过一个模式串:aabaaf, 并返回在字符串中开始出现模式串 patte

额外说明

安卓学习笔记36:内容提供者

文章目录 零、学习目标 一、内容提供者 (一)概述 (二)作用 二、案例演示 - 显示系统联系人 (一)运行效果 (二)涉及知识点 (三)实现步骤 1、创建安卓应用【DisplayContacts】 2、将背景图片拷贝到drawable目录 3、主布局资

额外说明

C案例:打印斐波拉契数列

C案例:打印斐波拉契数列 斐波那契数列,又称黄金分割数列,指的是这样一个数列:0、1、1、2、3、5、8、13、21、34、……在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1,F(n)=F(n-1)+F(n-2)(n≥2,n∈

额外说明

三、redis环境安装

三、redis环境安装 3.1、下载和安装 下载地址:https://github.com/tporadowski/redis/releases                 使用以下命令启动redis服务端 redis-server C:/tool/

ads via 小工具