多了解一下Chrome开发者控制台

多了解一下Chrome开发者控制台

2017年10月14日 ? Tools, Web前端 ? 1.0k views ? 暂无评论

作为一名前端开发者,Chrome内置的控制台是必须了解的,它拥有非常丰富的特性功能,对我们的开发帮助灰常大!

1、元素选择器($)

如果你接触过JQuery,那么对$()肯定不陌生,这是元素选择器,用来选择HTML元素,但现在,我们要了解的是控制台中的$()。

打开百度,按F12打开控制台

$() 相当于JavaScript中的 document.querySelectorAll(),返回一个数组(后者返回的是类数组对象)。

注:本身 $() 应该是 document.querySelector(),但今天测试却是返回一组值,待考究。

就像上图所示,可以 $()[index] 返回某一个元素。

其实还有不少快捷键:

$ // 相当于 document.querySelector 。

$$ // 相当于 document.querySelectorAll 。

$_ // 返回上一个表达式的值

$0-$4 // 返回最近5个Elements面板选中的DOM元素。

dir // console.dir

keys // 取对象的键名, 返回键名组成的数组

values // 去对象的值, 返回值组成的数组

方向键盘的上下键

copy(content) // 将content(也可以说是content)复制到剪贴板

2、console

console相信大家用的最多,这里就不多介绍了,可以看这篇文章:《JavaScript在浏览器上的调试技巧》

3. 让Chrome变成编辑器

在Chrome中,我们只需一行命令即可让其变成编辑器:

document.body.contentEditable=true

4. clear()

如果你想清空控制台和内存,只需这样:

clear()

接着点回车键即可。

下面再介绍一些有趣实用的功能:

1、截图

其实chrome提供了一个截图功能,但貌似只能在移动模式。

2. 代码格式化

有些时候,我们在控制台的Sources中查看CSS或JavaScript文件时,会看到一堆压缩的代码,但只需点击一下这里:

3. 打开命令菜单

Cmd + Shift + P(Mac)或Ctrl + Shift + P(Windows,Linux)打开命令菜单。

4、隐藏部分console日志

如果日志太多,我们可以隐藏掉部分 Console 日志(在输出日志的脚本上单击右键,filter -> hide)

这里还发现了一个不错的关于Chrome开发工具的文档:Chrome开发工具文档

转自:ghmagical

jpg 改 rar 

原文地址:https://www.cnblogs.com/kuangke/p/9397633.html

时间: 2024-10-08 05:45:40

多了解一下Chrome开发者控制台的相关文章

Chrome开发者控制台的这些功能你都知道吗?

Chrome内置了一些开发者工具,这些工具提供了很多的功能.今天,我们将会专注于JavaScript控制台. 在我编程的过程中,这个控制台为我提供了大量的帮助. 如果你正在电脑端阅读这篇文章,你可以在阅读的同时打开Chrome来实践一下. 1. 选择DOM元素 如果你熟悉jQuery,你一定知道$('.class')和$('#id')选择器有多重要.它们会通过类或是与其相关的ID来选择DOM元素. 但是其实在开发者控制台中,即使你无法在DOM中使用jQuery,你一样可以这样选择. $('tag

利用 Chrome 开发者工具远程调试 Android 中的原生 WebView

之前写过一篇关于 Android Studio 断点调试技巧 的文章,但都是针对 Native 代码的调试,对于 Hybrid 开发模式下的 WebView 却无从下手.幸运的是,PC 中的 Chrome 浏览器提供的开发者工具能够帮助我们远程调试 Android 中的 WebView 加载的网页. Android 4.4 (KitKat) 开始,使用 Chrome 开发者工具可以帮助我们在原生 Android 应用中远程调试 WebView 网页内容.一起来看看怎么操作吧. 第一步,设置 We

Chrome开发者工具详解(1):Elements、Console、Sources面板

Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Security面板.Audits面板这些功能面板. 这些按钮的功能点如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断

在 Chrome 开发者工具中调试 node.js

命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起.它的目的在于为调试.分析和开发 Node.js 应用程序提供一个简单的界面. 你可以使用 npm 来安装它: npm install -g devtool 在某种程度上,我们可以用它来作为 node shell 命令的替代品.例如,我们可以这样打开一

1.Google Chrome浏览器 控制台全解析

Google Chrome浏览器 控制台全解析 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速度还是JavaScript执行速度(现在的FireFox4也比之前的FireFox3有很大的进步).不过当时由于Chrome的开发者工具还不是很完善,而我又不是很熟悉,加之对于Firebug的好感和依

15个必须知道的chrome开发者技巧

你可能已经熟悉了它的部分功能,如使用console和debugger在线编辑CSS.在这篇文章中,我们将分享15个有助于改进你的开发流程的技巧. 一.快速切换文件 如果你使用过sublime text,那么你可能不习惯没有Go to anything这个功能的覆盖.你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候,按Ctrl+P(cmd+p on mac),就能快速搜寻和打开你项目的文件. 二.在源代码中搜索 如果你希望在源代码中搜索要怎么办呢?在页面已经加载的文

转15个必须知道的chrome开发者技巧GIF

在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和debugger在线编辑CSS.在这篇文章中,我们将分享15个有助于改进你的开发流程的技巧. 一.快速切换文件 如果你使用过sublime text,那么你可能不习惯没有Go to anything这个功能的覆盖.你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候,按C

前端调试效率低?试试这10个“Chrome开发者工具”使用技巧

天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 1,打开Shadow DOM显示 浏览器对例如Video.Password等组件进行了封装,无法查看到组件的详细代码,不利于调试.幸好,通过配置能够在元素标签器中显示被隐藏的组件代码. 实现:Settings → General → Elements → Show user agent shadow DOM 2,在控制台快速选择元素 在Chrome Dev Tools 控制

史上最全的chrome开发者工具功能介绍

http://web.jobbole.com/82558/   Chrome开发者工具不完全指南(一.基础功能篇)http://web.jobbole.com/82562/    Chrome开发者工具不完全指南(二.进阶篇)http://web.jobbole.com/82576/    Chrome开发者工具不完全指南:(三.性能篇)http://web.jobbole.com/82590/     Chrome开发者工具不完全指南(四.性能进阶篇)http://web.jobbole.co