谷歌浏览器有几种开发工具?

  谷歌浏览器有几种开发工具?

Google Chrome开发者工具我想是Web编程的程序员都不会不知道,以前小编习惯使用火狐的开发者工具,因为觉得fireBug不错;但是后边就觉得不好用了,还经常卡死,网上流传firebug一个大师跳槽到了谷歌,所以就改用谷歌了,下边详细介绍一下Google Chrome开发者工具的使用

  只要安装了谷歌浏览器,就可以使用Google Chrome开发者工具了,Google Chrome开发者工具是内嵌到浏览器的开发工具。

  打开方式有两种:第一“按F12”,第二:shift+ctrl+i



  一、Console介绍

  Console可以查看网页运行后提示的消息,错误或者警告以及输出内容等,网页后台可以使用Console.debug("输出内容");来在Console输出显示,可以做到调试的作用吧,不过一般真正调试不是拿Console。console.debug("Console使用介绍");console是小写形式,不然提示没有Console



  二、Resources介绍

  Resources里可以查看web程序跑起来后所加载的一些资源(Resources),包括图片或者其他“值”,以及Cookies



  三、Sources介绍

  Sources可以查看运行的脚本,调试一般都是在Sources调试的,所以程序开发者需要了解和熟悉Sources的使用



  四、Sources调试使用

  在左侧的脚本代码编号,鼠标点击即可添加断点,添加断点后,刷新网页,程序运行到断点即可看到断点调式的状态了,具体调试需要在自己想查看某个方法里边是否有问题,一步步排除,效果很好



  五、NetWork介绍

  NetWork可以看到网页加载的脚本和资源的时间,还可以看到某些不能加载成功的资源;这里有位是百度首页演示,百度首页内容很干净所以不需要加载什么图片等资源



  六、Elements介绍

  Elements这个就比如页面的每个元素吧,比如百度搜索这个图片,可以通过Elements找到,搜索框也可以,在底下的“放大镜”类似的控件,点击然后选择自己想要查看要素或位置,Elements会跳转到相应的实现代码



  注意事项:谷歌浏览器建议使用Ctrl+R刷新页面,可以将修改的js和html代码无误快速更新。

(0)

相关推荐

  • HTML5 7种开发工具

    HTML5被看做是Web开发者创建流行Web应用的利器,增加了对视频和Canvas 2D的支持.HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来,如Adobe的Flash和微软的Silver ...

  • Windows 8 应用框架理解及开发工具使用实例教程

    Windows 操作系统之所以风靡世界,是因为其“易学易用”,从用户的角度出发,让数以万计的非IT人员使用计算机实现娱乐,工作等目的。Windows 8继承Windows桌面的优点,同时提供一种新的用 ...

  • 5个前端工程师必备的最佳开发工具

    原文作者 Arnaud Breton 为前端工程师,特别专注于前端和使用者经验,这篇文章出自于mention blog。以下内容由作者以第一人称撰写。 过去几年一直不断地提到 Web 应用新世代的成长 ...

  • 8款替代DREAMWEAVER的免费开源网页开发工具

    Adobe Dreamweaver虽然非常好用,但它并不是唯一一个能够设计、开发、发布精彩网站的Web开发集成环境。我们的开源世界里有很多非常棒的可以完全替代Dreamweaver的各种功能的优秀We ...

  • 8款方便快捷的的CSS开发工具

    当你开发一个网站或Web应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间。在这篇文章中,我为大家收集了超有用的 CSS 开发工具。 对于 Web 开发人员来说,找到有用的CSS 开发工具,就 ...

  • 2016年新鲜出炉的20款网页开发工具推荐

    越来越多的移动端和桌面端应用开始使用HTML.CSS和JS来开发了,而网页设计 更是离不开这些语言.正是这种局面使得许多新的网页技术成为了可能,也催生了许多诸如React.js.Angular和Nod ...

  • 支付宝小程序开发工具怎么用?蚂蚁开发者工具使用教程

    支付宝小程序开发工具使用教程 支付宝小程序是手机应用嵌入支付宝客户端的一种方法,有以下特点: 基于 Web 技术,学习成本低 一套代码,同时支持 iOS 和 Android,接近原生体验 提供丰富的组 ...

  • 微信小程序开发工具怎么使用 微信小程序开发工具使用图文教程

    微信小程序开发工具怎么使用呢?很多朋友都不是很清楚,下面小编给大家带来了微信小程序开发工具使用图文教程,感兴趣的小伙伴一起看看吧! 微信小程序开发工具使用教程如下所示: 登陆微页官网,点击首页weba ...

  • Android开发:[1]Android开发工具下载

    Android开发环境可以自行搭建,也可以选择Google已经绑定好的开发工具,下面先介绍第二种工具的下载. 操作方法 01 搜索Android Developers,进入"Android开 ...