当前位置: 首页 > news >正文

Chrome开发使用技巧总结

Chrome一个程序员开发神器,但是好多猿子们不会或者没有正确使用。今天教大家如何利用它快速高效的开发调试工作。

代码格式化

有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个 { } 标签,chrome会帮你给格式化掉。

强制DOM状态

有些HTML的DOM是有状态的,比如 标签,其会有 active,hover, focus,visited这些状态,有时候,我们的CSS会来定关不同状态的样式,在分析网页查看网页上DOM的CSS样式时,我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。

动画

现在的网页上都会有一些动画效果。在Chrome的开发者工具中,通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。于是你就可以慢动作播放动画了(可以点选 25% 或 10%),然后,Chrome还可以帮你把动画录下来,你可以拉动动再画的过程,甚至可以做一些简单的修改。

直接编辑网页

在你的 console 里 输入下面的命令:

document.designMode = "on"

于是你就可以直接修改网页上的内容了。

P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L(Windows下),CMD + K (Mac下)

网络限速

你可以设置你的网络的访问速度来模拟一个网络很慢的情况。

复制HTTP请求

这个是我很喜欢 的一个功能,你可以在 network选项卡里,点击 XHR 过滤相关的Ajax请求,然后在相关的请求上点鼠标右键,在菜单中选择: Copy => Copy as cURL,然后就可以到你的命令行下去 执行 curl 的命令了。这个可以很容易做一些自动化的测试。

抓个带手机的图

这个可能有点无聊了,不过我觉得挺有意思的。

在device显示中,先选择一个手机,然后在右上角选 Show Device Frame,然后你就看到手机的样子了,然后再到那个菜中中选 Capture snapshot,就可以抓下一个有手机样子的截图了。

设置断点

除了给Javascript的源代码上设置断点调试,你还可以:

给DOM设置断点

选中一个DOM,然后在右键菜单中选 Break on … 你可以看到如下三个选项:

给XHR和Event Lisener设置断点

在 Sources 面页中,你可以看到右边的那堆break points中,除了上面我们说的给DOM设置断点,你还可以给XHR和Event Listener设置断点,载图如下:

关于Console中的技巧

DOM操作

chrome会帮你buffer 5个你查看过的DOM对象,你可以直接在Console中用 $0, $1, $2, $3, $4来访问。

你还可以使用像jQuery那样的语法来获得DOM对象,如:$("#mydiv")

你还可使用 $$(".class") 来选择所有满足条件的DOM对象。

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

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

monitorEvents(document.body, "click");
Console中的一些函数

1)monitor函数

使用 monitor函数来监控一函数,如下面的示例

2)copy函数

copy函数可以把一个变量的值copy到剪贴板上。

3)inspect函数

inspect函数可以让你控制台跳到你需要查看的对象上。如:

更多的函数请参数官方文档 – Using the Console / Command Line Reference

Console的输出

我们知道,除了console.log之外,还有console.debug,console.info,console.warn,console.error这些不同级别的输出。另外一个鲜为人知的功能是,console.log中,你还可以对输出的文本加上css的样式,如下所示:

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

于是,你可以定义一些相关的log函数,如:

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 or %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对象

console对象除了上面的打日志的功能,其还有很多功能,比如:

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

console.time() 和 console.timeEnd() 可以帮你计算一段代码间消耗的时间。

console.profile() 和 console.profileEnd() 可以让你查看CPU的消耗。

console.count() 可以让你看到相同的日志当前被打印的次数。

console.assert(expression, object) 可以让你assert一个表达式

这些东西都可以看看Google的Console API的文档。

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

相关文章:

Chrome开发使用技巧总结

Chrome一个程序员开发神器,但是好多猿子们不会或者没有正确使用。今天教大家如何利用它快速高效的开发调试工作。代码格式化有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个 { } 标签,chrome会帮你给格式化掉。强制DOM状…...

你真的会在阳光下拍照片么?

你好,我是小麥。 上节课我们讲了如何通过影子判断光的质量,也就是光的软硬,这节课我们来接着说一说光的方向和环境光的实际运用。 虽然在现实生活里,我们可能没有从软硬的角度观察过光线,但我相信你在拍照片的时候一…...

量化择时——均线策略及改进方法(第1部分—因子测算)

文章目录道氏理论个股股价走势阶段板块、行业股价走势均线策略交易逻辑均线策略效果测算改进一:设置策略信号偏移量改进二:生成止盈止损信号道氏理论 使用盘面数据,根据计算出的一条或多条均线,判断入场与离场的时机,…...

封装几个有用的 Vue3 组合式API

本文将介绍如何使用Vue3来封装一些比较有用的组合API,主要包括背景、实现思路以及一些思考。 就我自己的感觉而言,Hook与Composition API概念是很类似的,事实上在React大部分可用的Hook都可以使用Vue3再实现一遍。 为了拼写方便,下文内容均使用Hook代替Composition API。相…...

MyBatisPlus中的条件构造器Wrapper

引言为什么要了解Wrapper?Wrapper解决的了什么问题?一、Wrapper:条件构造抽象类,用来解决单表操作出现的一些复杂问题,例如排序,和模糊查询等等结构图文字解释AbstractWrapper : 用于查询条件封装&#xff…...

类和对象及其构造方法

类和对象 现实世界的事物由什么组成? 属性 行为 类也可以包含属性和行为,所以使用类描述现实世界事物是非常合适的类和对象的关系是什么? 类是程序中的“设计图纸” 对象是基于图纸生产的具体实体什么是面向对象编程? 面向对象编…...

HStream Console、HStreamDB 0.14 发布

近两个月,HStreamDB 相继发布了 0.13 和 0.14 版本,包含多项已知问题修复。同时,我们也发布了全新的 HStream Console 组件,为 HStreamDB 带来了简洁友好的图形化管理界面,将帮助用户更轻松地使用和管理 HStreamDB. H…...

参考文献怎么查找,去哪里查找?一篇文章讲明白这些问题

在我们撰写论文查找参考文献时,往往不知道从哪里入手,本文小编就针对下面这三个方面给大家详细讲解下: 一、查找参考文献方法 二、参考文献资料查找网站 三、参考文献格式规范 一、查找参考文献方法: 1、知网全球最大的中文数据…...

docker-compose+HAProxy+Keepalived搭建高可用 RabbitMQ 集群

基础环境准备 系统环境:Centos7.6 Docker version: 1.13.1, build 7d71120/1.13.1 Docker Compose version: v2.2.2 三个节点: 10.10.11.79 (这一台做rabbitmq集群根节点) 10.10.11.80 (这台做haproxyke…...

自动化框架如何搭建?让10年阿里自动化测试老司机帮你搞定!自动化测试脚本怎么写?

一、何为框架?何为自动化测试框架? 无论是日常技术交流,还是在自动化测试实践中,经常会听到一个词叫:框架。之前对“框架”这个词知其然不知其所以然。现在看过一些资料以及加上我自己的一些实践有了我自己的一些看法…...

剑指 Offer 15. 二进制中1的个数

剑指 Offer 15. 二进制中1的个数 难度:easy\color{Green}{easy}easy 题目描述 编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位数为 ‘1’ 的个数(也被称为 汉明重量).…...

CHAPTER 3 磁盘管理

磁盘管理1 磁盘管理1.1 块设备信息(lsblk)1.2 挂载硬盘1.2.1 挂载单个硬盘(mkfs、mount)1.2.2 磁盘分区工具(fdisk)1.2.3 创建分区1.2.4 相关命令1. df2. partprobe3. mkfs1.3 逻辑卷管理器(LVM)1. 涉及概念2. 使用LVM流程1.4 磁盘检测及修复(fsck)1 磁盘…...

MS python学习(7)

Managing Keys - dotenv Managing keys usage of .env module 项目地址:https://github.com/theskumar/python-dotenv Reads the key,value pair from .env and adds them to environment variable. 将key明文(hard code)形式写在script里…...

工业物联网“杀手级”应用—预测性维护

一、预测性维护的必要性 随着新一轮科技革命和产业变革的兴起,工业物联网、大数据、人工智能等技术正与经济社会各领域加速渗透融合。由于市场竞争对精细化成本管控的要求,设备的重要性越来越凸显,设备的维护对策也必然从响应式维护&#xf…...

Java代码弱点与修复之——Explicit null dereferenced(显式空间接引用)

弱点描述 Explicit null dereferenced, 显示空间接引用。是 Coverity 静态代码分析工具检测到的一种中风险缺陷。这种缺陷通常发生在尝试使用空指针引用调用对象上的方法或访问属性时。 Explicit null dereferenced的缺陷可能会导致程序崩溃或产生不可预测的结果。 在Java语…...

一元导数与多元求导数总结

前序:文章结构 1.一元导数 ①一般函数求导 因为太简单的原因,事实上一般函数求导不会单独出现,大多数都是出现在各种特殊的求导过程中。只要掌握16个基本求导公式没问题。 ②复合函数求导(主要链式法则) 这种一般是…...

通过堆栈分析深拷贝、浅拷贝、赋值的差异

前言数据类型分为:基本数据类型String、Number、Boolean、Null、Undefined、Symbol对象数据类型Object、Array基本数据类型的特点:直接存储在栈(stack)中的数据引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内…...

网络割接概述

网络割接概述割接背景企业网络的变化割接概述割接难点割接的操作流程情景模拟及解决方案常见的割接场景割接背景 随着企业业务的不断发展,企业网络为了适应业务的需求不断的改造和优化。无论是硬件的扩容、软件的升级、配置的变更,凡是影响现网运行业务…...

开放开源开先河(下)

目录 1.唯一性定义品牌 2.打造爆款塑造品牌 3.生态系统传播品牌 打造爆款塑造品牌 目前全球100多个开源基金会大部分都在美国,已成功孵化了800多个项目。而开放原子开源基金会现有136家捐赠单位,2020年9月,百度将区块链项目超级链&#xff0…...

maven的学习

为啥要用maven 1、不用认为添加jar包所依赖的其他jar包 2、能在本地仓库只保留一份jar包,避免了多个工程使用相同jar包,需要重复导入的问题,减少冗余 3、能够规范添加jar包,在下载需要的jar包时有多种方法,但是不能保…...

从前端到后端全面解析文件上传

从前端到后端全面解析文件上传1.前端准备(vueelement-ui)2.后端准备(SpringBootminiomysql)2.1解决跨域2.2配置minio与mysql2.3controller层2.4service层1.前端准备(vueelement-ui) <!DOCTYPE html> <html lang"en"> <head><meta charset"…...

全网火爆,软件测试面试题大全,接口测试题+回答 (18k+的offer)

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 面试测试工程师的时…...

【iOS】—— 浅看block源码

block 文章目录block如何通过终端clang生成源码cpp文件block实质截获自动变量全局变量和静态变量的截获__block说明符iOS开发“强弱共舞”——weak和strong配套使用解决block循环引用问题如何通过终端clang生成源码cpp文件 之前在学习block中学习的比较浅&#xff0c;只看了oc…...

I.MX6ULL_Linux_系统篇(23) busybox文件系统构建

Linux“三巨头”已经完成了 2 个了&#xff0c;就剩最后一个 rootfs(根文件系统)了&#xff0c;本章我们就来学习一下根文件系统的组成以及如何构建根文件系统。这是 Linux 移植的最后一步&#xff0c;根文件系统构建好以后就意味着我们已经拥有了一个完整的、可以运行的最小系…...

shpjs将.zip文件转成geoJson

一、npm install shpjs二、import shp from shpjs三、async setLayerSource() {const geoJsonData await shp(dataUrl)}一直报错&#xff1a;是因为Buffer这个插件一直没找到Uncaught Error: nodebuffer is not supported by this browser解决办法npm install node-polyfill-w…...

eBay是不是一定要养号?是的

相信每个运营过eBay的用户遇到过这个棘手的问题&#xff0c;eBay个人账户的刊登数量是有限的&#xff0c;尤其是新账户只有5个sku&#xff0c;所以一开始的运营会比较艰难。想要快点走上正轨的话&#xff0c;就一定要去注重这个“养号”。eBay运营模式 1.拍卖 eBay最开始是一个…...

宝塔(二):升级JDK版本

目录 背景 一、下载JDK17 二、配置环境变量 三、配置新的JDK路径 背景 宝塔的软件商店只有JDK8&#xff0c;不满足我当前项目所需的JDK版本&#xff0c;因此想对JDK版本进行升级&#xff0c;升级为JDK17。 一、下载JDK17 先进入 /usr/lib/jvm 目录 点击终端&#xff0c;进…...

【LeetCode】螺旋矩阵 [M](数组)

54. 螺旋矩阵 - 力扣&#xff08;LeetCode&#xff09; 一、题目 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,…...

实验二:动态规划

1.双11的红包雨 问题描述 双11到了&#xff0c;据说这2天会下红包雨&#xff0c;每个红包有不同的价值&#xff0c;小k好开心&#xff0c;但有个规则&#xff0c;就只能接掉落在他身旁的10米范围内的红包&#xff08;0-10这11个位置&#xff09;。小k想尽可能的多抢红包&…...

华为机试 HJ27 查找兄弟单词

题目链接&#xff1a;https://www.nowcoder.com/practice/03ba8aeeef73400ca7a37a5f3370fe68?tpId37&tqId21250&rp1&ru/exam/oj/ta&qru/exam/oj/ta&sourceUrl%2Fexam%2Foj%2Fta%3Fdifficulty%3D3%26page%3D1%26pageSize%3D50%26search%3D%26tpId%3D37%26t…...