预览加载中，请您耐心等待几秒...

GoogleChrome浏览器调试功能介绍.docx

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共27页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

GoogleChrome浏览器调试功能介绍 Chrome浏览器得益于其优秀的V8解释器，javascript执行速度和内存占有率表现非常优秀。对于html+css+javascript前台技术的学习或者开发，浏览器developertool的使用时必不可少的，也能极大的提高学习或者开发效率。本文根据版本23.0.1271.10。在window下，开启developertool的快捷键为F12。 1Developertool功能结构 Developertool的功能栏有8个，分别是标签、资源、网络、源码、时间轴、性能、监察和显示（命令行）。 2Elementpanel 2.1Element控制面板基本功能 Element控制面板能够让你查看所有的DOMtree中的内容，可以根据html内容找到页面中的元素或者根据页面中的定位标签，同时可以改变DOM的内容。由javascript代码产生的标签，也只能通过这种方式查看了（在你的IDE中无法看到）。 Element控制面板 如上图所示，我选中 标签之后，在页面中显示的对应的元素就会选中。如果，我现在要定位百度一下这个按钮，我可以通过左下角的放大镜，在页面中选中百度一下，DOM中也会把对应的标签给你找出来。这个功能在调试时绝对是利器。最下面显示的是现在选中标签在DOM中的层次关系。 选元素找标签功能 我们也可以对里面的内容进行临时性修改，如刚才找到的百度一下标签中的value改成“调试一下”后马上在页面中相应显示。 2.2右侧功能栏 2.2.1style查看 使用css时，存在着样式覆盖等问题，有的时候显示的样式可能出乎你的意料，或者对元素的大小位置（特别是窗口）的查看。同时，我们也可以在这里进行临时修改，在页面中反应（真正的所见即所得，不是别的IDE所能替代的）。 修改样式或大小 2.2.2标签注册事件查看 如果你想知道“百度一下”这个按钮注册了哪些功能，或者鼠标点击时执行了哪个javascript函数，就可以通过这个功能实现了。 选中百度一下标签，定位keydown事件，找到对应的执行函数 2.2.3查找功能 Ctrl+F可以调出查找，查找你想要的内容，非常实用。 3资源控制面板 资源控制面板包括了这个页面中下载下来的所有的资源，同时也包括本地的cookie，还有html5中localstorage等高级功能。 资源查看面板 4网络控制面板 网络控制面板在两个方面还是非常还用的，一个是发现图片（css、js等）加载不了，可以通过network查看它请求的位置。第二个，是调试ajax时，可以查看它的请求和获取。如百度输入框中，输入关键字后会自动显示热门内容，这显然是一个ajax的使用。 网络加载显示 查看http请求和获得的内容 5源码控制面板（js调试） Javascript的调试，基本上是通过源码控制面板和命令行配合进行的。 5.1Beautifuljavascript 网上的js一般是压缩过的，阅读压缩过的javascript肯定是不是人能进行的，更别说添加断点了。在Scripts面板下面有个Prettyprint按钮(这种符号{}),点击会将压缩js文件格式化缩进规整的文件,这时候在设定断点可读性就大大提高了。 调整前 调整后 5.2代码出错定位 1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">23<htmlxmlns="http://www.w3.org/1999/xhtml">45<head>67<title>javascriptadd</title>89<scripttype="text/javascript">1011vardiv=document.getElementByd("a");1213functioncalSum(){1415vara=parseInt(document.getElementById("num1").value);1617varb=parseInt(document.getElementById("num2").value);1819document.getElementById("num3").value=(a+b);2021}2223</script>2425</head>2627<body>2829<inputtype="text"id="num1"/>add<inputtype="text"id="num2"/>3031<inputtype="button"id="btnCal"onclick="calum()"value="equal"/><inputtype="text"