【chrome】 chrome 开发者工具

1. 常用控制台工具



console.log  console.info  console.error  console.warn

console.assert

console.count

console.dir

console.time console.timeEnd

console.profile

console.timeLine

console.trace

$   $_返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的    $0~$5代表了最近5个你选择过的DOM节点

copy  没效果T_T

keys values  前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。

monitor unmonitor  前者监控模块,每次执行会在控制台输出一条信息输出传入参数,后者解除监控

debug  undebug  前者接收一个函数名作为参数。当该函数执行时自动断下来以供调试,类似于在该函数的入口处打了个断点,可以通过debugger来做到,同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。后者解除该断点。

2. 其他工具



地址栏中如下命令可以得到相应的信息:

命令 作用
chrome://dns/ 查看 Chromium 的DNS预取的域名
chrome://net-internals
Capture Export Import,ProxyTimeline,DNS,Socket,

SPDY,QUIC,Pipelining,Cahce,SPIs,Tests,HSTS,Bandwidth,Prerender

chrome://net-internals#Events 所有网络栈完成的工作和传送的消息
chrome://net-internals#Timeline 按照时间绘制的图,图中记录在各个时间点Chromium使用的网络资源
时间: 2024-11-06 14:35:50

【chrome】 chrome 开发者工具的相关文章

谷歌Chrome浏览器开发者工具的基础功能

上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码而一无所获之后打开Sources进行js断点调试,几乎能解决8成的代码问题. js断点功能让人兴奋不已,以前只能在IE中靠alert弹出窗口调试js代码,那样的开发环境对于前端程序员来说简直是一场噩梦.本篇介绍Sources的具体

通过使用Chrome的开发者工具来学习JavaScript

本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念"闭包"和"内部属性". 闭包 首先要讲的是闭包(closure) – JavaScript中最有名的东西之一.一个闭包就是一个使用了外部变量的函数.查看下面的例子: function A(a, b, c) { var ar = [a, b, c]; return function B(i) { return

谷歌 chrome 浏览器开发者工具打不开的解决方法

很长一段时间没有用Chrome浏览器 最近打开,发现开发者工具怎么都打不开 在网上也没有找到方法 各种打开方式都试了依然是没有动静 但是在隐身模式下开发者工具是可以的打开的 重新安装后还是一样 实在没有找到方法 就在浏览器里各种尝试 最后我打开扩展程序里 里面勾选了开发者模式 我把取消后开发者工具就可以正常使用了 不知道有没有其他人遇到开发者工具打不开的问题 如果有的话可以尝试看下扩展程序内是否勾选了开发者模式 如是取消就可以正常使用了

Chrome的开发者工具

Chrome开发者工具已经强大到没朋友的地步,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「Console大法好」 主要内容: 1.console.log 2.console.assert 3.console.count 4.console.dir 5.console.time & console.timeEnd 6.console.profile & console.timeLime

Chrome的开发者工具(Chrome Developer Tools)

按F12 https://developer.chrome.com/devtools/index http://www.w3school.com.cn/html/html_intro.asp http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html http://wenku.baidu.com/link?url=fz5kfYH9wlEkqHpkPiP7b8Ws4uVQzQaFQEMzroP7jWj4NYq2vx1FLHUfX9

chrome F12_Network 开发者工具详解

本文为学习chrome F12_Network的一点记录,如有不妥之处请各位大神指点,谢谢! 开发者工具面板 最常用的前四个功能模块如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断点调试JS. Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态.资源类型.大小.所用

chrome浏览器 开发者工具简介

Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀. 掌握了Chrome工具可提高学习效率和开发效率. 有如下功能面板,可以使用Ctrl+[和Ctrl+]快捷键在面板之间切换. 简单常用的就一笔带过 一.标签页 查看DOM tree内容 根据标签页的html内容找到对应元素 根据页面元素找到标签页的html 改变DOM内容 查看js动态生成的DOM 在标签页右侧查看style 查找 标签注册事件查看.[待扩展] 按钮绑定哪些功能,鼠标点击时执行了那个

[Selenium] 在Chrome的开发者工具中验证检查XPath/CSS selectors

Evaluate and validate XPath/CSS selectors in Chrome Developer Tools Method 1 : From Elements panel Use the search function inside Elements panel to evaluate XPath/CSS selectors and highlight matching nodes in the DOM. 1.Press F12 to open up Chrome De

Robot Framework 经验谈 - 撰写元素xpath表达式并且通过Chrome F12开发者工具进行验证

F12开发者工具有console标签,在其内执行console命令可以交互性验证css或者xpath表达式效果 xpath用$x(),将表达式用引号括起来放进去,回车执行命令,如果成功产生非空输出的匹配元素列表(可以点击自动框选定位.可以展开子元素查看),举例: $x("//table[@id='simpleWithNested']/tbody/tr/*") 对于引号内的部分,可以用count函数包裹起来,输出匹配元素列表的大小: 若用string替换count,则输出匹配元素列表所有

chrome 浏览器 开发者工具 性能检测 参数解释

Sending is time spent uploading the data/request to the server. It occurs between blocking and waiting. For example, if I post back an ASPX page this would indicate the amount of time it took to upload the request (including the values of the forms a