谷歌 chrome dev tools 浅析 – 成为更高效的 developer -pg电子游戏网站

google chrome在招来了firefox,firebug的项目组领导人john j. barton后,chrome dev tools也变的越来越好用,越来越方便了。本文根据google i/o上对chrome dev tools的介绍(),和相关ppt: 整理而来。(参照的chrome版本为: 19.0.1084.52)

 

实时css style编辑

 

选择一个dom,可以对dom进行编辑和操作,实时修改css style, 同时cssstyle可以保存变更历史版本。

 

 

保存变更历史版本:


 

同时支持可以在chrome 载入的css文件正文中自由的修改。

 

网络交互


 

当一个页面载入时,所有发出的请求可以在“network”里监听到,同时下面有”all”, “documents”, ”stylesheets”, “images”, “scripts”, “xhr”(xmlhttprequst), websockets, other, 这几个分类,可以清晰的把网络请求进行分类,同时可以看到每个请求的详细情况。

 

控制台

 

在控制台里可以方便的使用命令来查看dom,执行javascript, 等等操作, console api:  copy(), dir(), inspect(), $0,


 

script debugging

 

script debugging 脚本调试功能,这个功能可以说是chrome dev tools里最实用最强大的工具了:

1. javascript breakpoints, break on exception, javascript pretty print.


 

break points:断点在需要设置的地方点一下即可,break on exception:当此功能开启时,有script异常出现时,自动会在exception处断住,方便差错。javascript pretty print: 当javascript被压缩后,非常难阅读,pretty print使javascript按照语法和关键字重新换行并重排,使得压缩后的javascript仍然可以进行阅读。

 

2. dom breakpoints

 

dom元素断点,经常有多处javascript操作同一个dom元素,如果要在javascript上下断点,要下好几个地方,不好断到想要的地方,在dom元素上下断点就方便多了:


 

break on subtree modifications, break on attributes modifications, break on node removal, 可以方便的断到操作dom的javascript。

 

3. xhr breakpoints, event listener breakpoints:


 

xhr breakpoints,可以方便的断到xmlhttprequest ajax请求。event listener breakpoints, 可以方便的断到各种event。

 

4. 查找javascript

 

使用ctrl shift f, 打开查找窗口, 查找支持正则表达式:


 

查找函数定义:ctrl shift o


 

查找文件: ctrl o


 

5. 实时修改 javascript代码

 

页面外链javascript文件在 script panel中可以直接修改,改完后ctrl s 保存, 会立即生效,但是不支持 html 页面中 javascript 修改,经过 pretty print 格式化的javascript也不支持实时修改。

 

6. 自建script文件

 

在console(控制台) 中输入代码的最后一行加上 //@ sourceurl=filename.js, 会在script panel中加入一个新的外链script文件: filename.js, 这个新文件和其它外链javascript 文件一样,可以实时进行修改。

 

timeline

 

timeline功能把浏览器处理dom的时间轴画了出来,方便进行优化:


 

remote debugging

 

remote debugging 使得chrome成为一个webserver,执行命令--remote-debugging-port=1337, 同时再开一个chrome 访问localhost:1337, 就可以用一个chrome当host,一个chrome当client,在调试一些移动web的时候非常实用。



 

  • 大小: 45.6 kb
  • 大小: 39.6 kb
  • 大小: 49.6 kb
  • 大小: 38.5 kb
  • 大小: 39.3 kb
  • 大小: 48.6 kb
  • 大小: 44.2 kb
  • 大小: 45.6 kb
  • 大小: 49.2 kb
  • 大小: 46.6 kb
  • 大小: 46.9 kb
  • 大小: 35.2 kb
来自:
4
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 我们还将学习如何使用chrome开发工具找到它们。 1、介绍 内存泄漏是每个开发人员都要面临的问题。 即使使用内存管理的语言,也存在内存泄漏的情况。 内存泄漏是导致迟缓,崩溃,高延迟的根本原因,甚至会导致...

  • <!doctype netscape-bookmark-file-1> <!-- this is an automatically generated file. it will be read and overwritten. do not edit! --> <meta http-equiv="content-type" ...

  • 参考原文:... 我们还将学习如何使用chrome开发工具找到它们。 1、介绍 内存泄漏是每个开发人员都要面临的问题。

  • 有一段时间没有更新博客了,最近也是项目比较忙,公司项目上reactnative,之前也是没有接触过,所以...debug过程涉及到三个对象,一个是app(android或ios),一个是server,另外一个就是浏览器(chrome或firefox或其他)...

  • <p>you may also install <a href="https://github.com/facebook/react-devtools/tree/master/packages/react-devtools" target="_blank">the standalone version of react developer tools</a> to inspect the ...

  • 就像cookie一样,localstorage和sessionstorage可以被诸如chrome上的developer tools,sarafi上的web inspector等工具检测得到。通过这些工具,用户可以移除保存的数据或者查看访问的网页保存了哪些数据。 ...

  • 【ocp最新题库解析(052)--题4】which four are true about the tools used to?:http://blog.itpub.net/26736162/viewspace-2213217/ 【ocp最新题库解析(052)--题3】which two are true about external...

  • vb语言vb光盘管理系统设计(源代码 系统)本资源系百度网盘分享地址

  • h型脚架疲劳测试机sw16可编辑_零件图_机械工程图_机械三维3d建模图打包下载.zip

  • 笔记.zip

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • 金属材料杂质自动检测设备sw17可编辑_零件图_机械工程图_机械三维3d建模图打包下载.zip

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • stm32单片机fpga毕设电路原理论文报告基于mcs51单片机的微波脉冲功率测试系统本资源系百度网盘分享地址

  • vb语言vb报警管理系统设计(源代码 系统)本资源系百度网盘分享地址

global site tag (gtag.js) - google analytics
网站地图