相信很多朋友在开发网页的时候,经常需要学习别人网页的设计方法以及下载一些网页所用的图片或者调试javascript代码等等,那么我们怎样获取这些信息呢,可能大多数朋友已经知道怎样利用现在的浏览器来获取信息了,或者有更高级的办法。下面就来分享下我使用谷歌浏览器Chrome来获取信息或者是调试自己的javascript代码。
按F12打开控制台窗口,这个时候我们可以看到上面总共有8个菜单:Elements,Network,Source,Timeline,Profile,Resources,Audits,Console。
我自己也不是全部都知道是干什么的,就说下我经常用到的哈。
1.调试JS代码:点击Source菜单我们可以看到下图:
左边部分是网页的结构,包括了html页面,css文件,javascript文件。右边是详细信息,点击行号就可以给javascript打断点,进行调试。右上角有前进,跳入等按钮。鼠标移到某个变量上面,会显示出该变量的值。
2.查看html结构,有些网页的内容是动态加载的,我们在源代码里面看不到,但是在Element里面,我们能看到所有页面元素,并且是格式化好了的,非常方便:
如图,左边是html结构,点击到某一行在右边会显示出该行元素的css代码,定位非常方便。而且右边的css还会标出哪些css代码是无用的,这样便于我们优化css,提高网页的性能。
3.网页资源文件:Resources
如上图,左右是资源文件的结构,我经常用到的,就是筛选网页用的图片等文件的Images目录,该目录会显示该网页所用的图片,包括以背景图片方式加载的图片(以背景图片方式加载的图片我们在页面上是不能右键另存为的,因为它不是一个img元素,无法被选中)。
里面还有Web数据库选项,常用的Cookies也在左边的目录中,我们可以对该网页的Cookies进行查看,删除,清空的处理。
4.查看网页网络请求信息:Network
在该项中,我们可以看到网络请求的时间,大小,状态等等信息。需要注意的是,我们需要先开启Network窗口,再在网页中发起网络请求,这样才会在该窗口中显示出网络请求信息。点击某一项目,就可以看到该项的请求所用时间或者其他属性值,以便于优化和了解。
我经常用到的就是这些,当然,Chrome是一个非常强大的工具,如果大家还有更好的使用体验或者方法,欢迎共享哈,共同学习。希望我所写的这些对各位朋友有所帮助。
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:谷歌浏览器妙用 Chrome调试js代码
文章固定链接:https://www.pengyaou.com/homeart/NjI=.html
上一篇 美丽,壮观,惊险刺激的大自然
下一篇 四川师范大学09级7班