打开浏览器,按F12,选择console标签页;出现浏览器控制台。
在Chrome下为了演示JS, 有时候我们需要将改变console的字体大小,将console的字体放大。方法是改变chrome自定义文件Custom.css的样式,路径在Windows: C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
Mac OS X: ~/Library/Application Support/Google/Chrome/Default/User Stylesheets/
覆盖Chrome默认样式Custom.css:
body.platform-mac .monospace, body.platform-mac .source-code { font-family: Monaco, monospace; } // Keep .platform-mac to make the rule more specific than the general one above. body.platform-mac.platform-mac-snowleopard .monospace, body.platform-mac.platform-mac-snowleopard .source-code { font-size: 11px !important; font-family: Menlo, monospace; } body.platform-windows .monospace, body.platform-windows .source-code { font-size: 12px !important; font-family: Consolas, Lucida Console, monospace; } body.platform-linux .monospace, body.platform-linux .source-code { font-size: 11px !important; font-family: dejavu sans mono, monospace; }
console是没有引入jQuery库的,so...
但是能使用 $符 查找标签,能获取文档中的第一个标签
$('a')
获取所有的a标签,用 $$
what's this?
这条语句让我们能直接编辑页面中所有的文本。
怎么同时打印出 字符串和对象,加号是没有用的,使用逗号
id选择器
事件监听
动态事件监听
鼠标滑过$('#masthead-search-term')这个元素,console会输出一个mouserover,和一系列mousemove
如果输入文字($('#masthead-search-term')是个输入框)会在console会输出一系列键盘事件
如果想监视某个特定的事件,如 click
monitorEvents($('#masthead-search-term'), 'click')
如果想监视多个的事件,如 click,keyup,blur
monitorEvents($('#masthead-search-term'), ['click', 'keyup', 'blur')
但如果要消除某个事件的监视,
unmonitorEvents($('#masthead-search-term'), 'click')
计时器
错误信息
错误信息存储到对象中
我最喜欢的一个特性,数组对象的展示
算数表达式的结果继承
清空console,会消除所有的计算结果,但不会消除事件监听
clear()
清空console的快捷键是 Ctrl + L ,不会消除计算结果,也不会消除事件监听
trace()
Profile
profile('aaa')
执行后,点击profile面板,能查看CPU状况
dir 查看DOM节点属性
dir($('#body-container'))
切换到Element标签页查看DOM节点
$1
<div id="body-container">...</div>
参考 https://www.youtube.com/watch?feature=player_embedded&v=2zmUSoVMyRU
相关推荐
1、获取chrome浏览器的console日志 2、network下各个组件的详细信息 3、定时监控 4、日志收集
Chrome控制台使用详解.pdf 介绍在chrome浏览器调试javescript的使用方法
Chrome使用技巧设定浏览记录保存天数.docx
谷歌浏览器chrome的一些使用技巧分享 玩转你的谷歌浏览器
7大你可能不知道的Chrome使用技巧.docx
Google Chrome安装方法与使用技巧.docx
( PHP console for chrome extention 3.0.21_0.rar )
:party_popper: 在Chrome浏览器控制台中显示图片 快速开始 var script = document . createElement ( 'script' ) script . src = '//unpkg.com/console.img/dist/console.img.min.js' script . onload = ( ) => ...
Chrome浏览器的使用方法和技巧,能让浏览器飞起来,我希望我夸张了。 嘻嘻!
可以在Chrome中使用Prettier格式化的扩展程序
前言工欲善其事必先利其器。有些时候一个技巧可以节省我们很多的时间,也会让调试的过程变得更加简单直接。本次分享从不同的情景来说明应该如何搭配使用 Chrome D
PubNub Chrome 控制台第 1 步:克隆此存储库 git clone https://github.com/pubnub/chrome-console.git第 2 步:加载解压后的扩展在 Chrome 中,打开 chrome://extensions/ 点击+开发者模式单击加载解压缩的扩展程序...
chrome chrome
chrome chrome chrome chrome
C# webBrowser 使用Chrome内容案例
sinon-chrome, 使用 node.js 测试 Chrome 扩展 sinonsinon chrome是 单元测试 Chromium 和 Firefox 扩展和应用的helper 工具。 它使用sinon存根模拟所有扩展 api,允许你在 node.js 中运行测试而无需实际浏览器。...
你知道可以单击滚轮可以关闭标签吗?你知道可以把标签垂直排列在左手边吗? 没错,这儿有许多的Chrome小技巧等着你发掘呢
在国内使用Chrome浏览器的小伙伴,一直都比较愁。Chrome数据同步的问题。原因大家都懂。 有什么好办法来同步Chrome的数据呢?这里给大家推荐一个Chrome扩展。 官方网站 ...
如果使用的是安装版的 Chrome,那么运行 Google Chrome Backup 后会自动找到 Profile 目录,不需要手动设置,直接在 List of profiles 中右键 Chrome 图标,选择 Backup this Profiles 即可,Google Chrome Backup ...
chrome很好的使用