浏览器F12进行Web程序调试

  

转自http://www.cnblogs.com/yougewe/p/5152700.html

  引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东西了,或者换句话说,你想要实现的功能,你总能在某个地方搜索到答案,关键是你有没有这个时间精力去搜寻!以至于大多数的开发,其实就是一个找资料的过程,一个复制粘贴的过程,这的确也是一个可悲的现象。不过,换个角度来看,其实也挺好,现在咱们凡事都讲求一个效率问题,只要能实现功能,就甭管他复制粘贴抄袭了。问题的关键是,你得会复制、粘贴、抄袭,你得会调试你的代码啊!难道有人给了你所有的配件你就能把车子给组装起来?难道有人送你一辆好车你就会改装了?然并卵,关键还得看你自己有几斤几两了。

  我记得我曾经有一位资深的运维同事给我说过一句话:所谓的开发不过是仅仅掌握了一些调试代码的技巧而已。虽然我本人对于运维的工作也不怎么看得上眼,但是,不得不说,我很赞同他这句话。因为如今互联网横行的今天,有太多太多的参考,你可以实现所有你想实现的。但又正是因为有太多太多的参考,以至于我们都不知道选择什么好,哪个是对的,哪个是错的?谁说不是呢,没有选择是一种无奈,太多选择总会让人浮躁!你如果能够随心所欲地调试你的代码,谁敢说你不牛掰我都不信了?

  看本文标题,是讲Web调试的,但是我估计废话所占的篇幅不小,因为,哈哈,我TM就是一个喜欢来虚的这么一个人!我所谓的虚的,是指理论级别的东西而非实战级别。但是,我始终坚信,理论是实践的基础,实践会加深真理论的认识!想成为一个真正的开发人员,我觉得,至少你得了解计算机它是怎么工作的。基础知识真的是必不可少的,如:计算机原理,汇编,单片机,C,VB,VC,数据结构,经典算法!这些无疑都会加深你对理论的了解!

  好,废话已经太多。下面进入正题,作为Web开发者,Web调试工具自然是必不可少的。那么,我们就来聊聊Chrome, Firefox, IE三大家的Web调试的一些特点(虽然市面有数不清的浏览器,但是纠其内核,基本都是这三者之一),以及都有哪些技巧?

  一、Firefox 插件之 Firebug, 火狐调试利器【初学必备】

  为什么要第一个提到火狐呢?因为啊,这东西确实是太方便了,刚开始接触开发那会儿,根本都不知道调试,只是凭着感觉去做事。后来看到有人在用Firefox 的 Firebug,一下就爱上了,原因如下。优点:1 中文;2 直观;3 定位超级快!缺点:1 插件每次都需要重新下载;2 每次都要重新启用才可以使用各种调试功能。

  下面我们先看几个主要功能模块截图,稍后稍细作解析!

. 控制台

.. 脚本调试

... 网络收发状况查看

  里面主要用到的功能是,1. 控制台,可心直观的看到一些页面的基本情况,如上图所示的错误信息,以及一些ajax的请求,很轻松的点开就可看到访问的参数等等,基本上通过这里的调试,可以给你省去30%~40%的错误了;2. 脚本页,如果js脚本比较复杂,那页面js单步调试等功能就很有必要了,Firebug中有一个很好的搜索功能@多文件搜索,也就是说,你只要能说出其个别的关键词,他就可以帮你找到具体在哪个脚本页面哪一行。3. 网络功能,用于查看各个页面的具体请求情况很方便,用于定位哪个节点是否出问题是必须的,当然,多了解一点http协议对于这一块的理解还是很有好处的。

  二、Google Chrome 之F12自带控制台【水平的进阶】

  Google作为W3C标准制定者之一(好像是的),是个绝对的W3C标准支持者,因此对于很多的标准属性,在chrome都有很好的展现。但是有一点让人很困惑,那就是整个页面都是英文,描述也和咱中国人的习惯不太吻合,所以适合用于进阶却不适合用于初学,适合用于英语水平稍好点的同学(当然了,看习惯也就都一样了)。优点:1 浏览器自带;2 官方标准适合自己写标准语法;3 功能齐全;4 控制台调试非常方便几乎可以当作一个简单的帮助文档来使用!缺点:如前所述!

  下面先看几个截图,稍后细作讲解!

. 页面元素查看

.. 网络状况查看

... 资源使用情况(脚本调试)

.... 控制台临时运行

  作为一个经验稍微丰富点的开发人员,我认为chrome的调试是必备的,虽然有很多乱七八糟的英文,但我们还是可以克服的嘛,而且他功能特别齐全。基本功能和火狐的firebug差不多,不同的只是一个展现方式的不一样,那我就说几个特殊的或者前面没有说到的点好了。1. 很方便地动态编辑html元素,从而避免反复改代码调试的工作,同理于css样式的编写。写html页面我有一个不成熟想法:其实我不会写什么页面,我不过知道几个标签html,div,span和几个css名称display,position,font-size,然后我就不停在浏览器控制台里猜测各种想法,然后复杂的效果就出来了;2. 作为脚本调试,我本人还没有习惯chrome的调试方式,不支持多文件搜索,这对于包含文件很多的地方并不是好事,不过你可以把所有的资源都打开,这时候再搜索就可以给你定位了;3. 适应他的网络查看工具(点击链接后具体信息在右边展示,时间轴根据情况适当隐藏);4. 多利用控制台写一些尝试操作,对于已经加载了的全局变量,你可以直接在控制台使用,如要查看某元素高度,$(‘#ele‘).height();这里的‘$‘就是文档中已经加载的jquery变量。5. 其他一些优化工具可以尝试使用!(哈哈,我只是看并不用)

  三、IE 工具之 httpwatch 【看个人喜好了】

  其实,我基本上不会用IE去调试代码的了,但是作为一个知名度不低的浏览器,以及名声赫赫的httpwatch还是有必要了解一下的。优缺点自行判断,我就说两句就好。1. 功能强大,可以将访问日志导出,在另外的地方进行静态分析;2. 抓包,其实他就是干这个事的!3. IE的F12反正和其他的也差不多(我说的是高版本),简单搞搞就行,反正我仅仅用来调试兼容性问题!

  工欲善其事,必先利其器!只有有一个好的顺手的调试工具帮助你,你才能更快地进行你的工作。当然,你最好有一些基础理论知识,这对于你排查问题找方向会有很大的帮助!So, Debug your code, Debug yourself.

  注:本文主要讲web控制台调试,看起来好像全是前端工作,但是其实往往是和后端紧密相连的!一个字,去了你就知道了!

时间: 2024-10-10 14:16:29

浏览器F12进行Web程序调试的相关文章

巧用浏览器F12调试器定位系统前后端bug

做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器. httpwatch,firebug都是浏览器的插件,需要额外下载,fiddler,charles也需要额外下载安装包另行安装,但是浏览器F12调试器却是所有浏览器内置的调试器,不需要大家额外去安装的,打开它只是一个顺手的事情,而且它提供的功能也比较强大,因此如果在开发或者测试web系统的时候,我们可以先考虑使用这

@Java web程序员,在保留现场,服务不重启的情况下,执行我们的调试代码(JSP 方式)

一.前言 类加载器实战系列的第六篇(悄悄跟你说,这篇比较水),前面5篇在这里: 实战分析Tomcat的类加载器结构(使用Eclipse MAT验证) 还是Tomcat,关于类加载器的趣味实验 了不得,我可能发现了Jar 包冲突的秘密 重写类加载器,实现简单的热替换 @Java Web 程序员,我们一起给程序开个后门吧:让你在保留现场,服务不重启的情况下,执行我们的调试代码 最近事不算多,所以有点时间写博客,昨天写着写着,测试的同学反馈说有一个bug.我看了下服务端日志,空指针了: 下面会给出详细

Visual Studio 2013 如何在停止调试Web程序后阻止IIS Express关闭

vs2013 调试项目的时候,当停止调试的时候,端口就被断了.之前以为是IIS那边的控制问题,但是其他并行的项目运行都没有出现这种情况. 最初也没在意,直到现在实在忍受不了了,每次重开也太烦了.就去各种觉得靠谱的关键字查,根据"IIS Express 自动关闭"查到的(之前查了一堆,关键字的把握还有待提高啊) 英文链接(没搞清楚哪个是原文) http://developerpublish.com/visual-studio-2013-tips-tricks-prevent-closin

5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型

一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调试 先看console控制台是否报错 浏览器debug alert(); console.log(); 三.函数 系统函数: parseInt(); 能够转换首字符是数字的字符串 Number();只能转换数字的字符串 isNaN(); is not a number //是不是非数字? 自定义函数: a.f

JDK扩展DCEVM让WEB程序完全不重启调试

转自:http://acooly.iteye.com/blog/1777119 目前JDK默认支持对方法体内部的修改,可以重新自动加载.所以在WEB工程中,可以不重启WEB容器的情况下修改方法体内部的实现,进行程序调试.但是很多时候需要新增实例变量和方法,这个时候,默认的JDK就不能支持. 这里推荐一个动态代码扩展的VM:The Dynamic Code Evolution Virtual Machine,可以实现不重启WEB容器的情况下,新增实例变量和方法,并动态reload后进行调试. 官方

tomcat+java的web程序持续占cpu问题调试

原文出处:http://www.blogjava.net/hankchen 现象: 在tomcat中部署java的web应用程序,过一段时间后出现tomcat的java进程持续占用cpu高达100%,导致web程序访问受阻. 可能原因分析: 可能程序确实在进行数据计算:或程序进入死循环: 解决方法: 1.先用top查看占用cpu的进程id 2.再用ps -ef | grep PID定位具体的进程主体:如是否是tomcat启动的java程序 3.用ps -mp pid -o THREAD,tid,

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

【Web探索之旅】第四部分:Web程序员

内容简介 1.第四部分第一课:什么是Web程序员? 2.第四部分第二课:如何成为Web程序员? 3.第四部分第三课:成为优秀Web程序员的秘诀 第四部分:Web程序员(完结篇) 大家好.终于来到了[Web探索之旅]的最后一部分. 我们的第二和第三部分都略有难度,不过这第四部分和第一部分一样,都会比较轻松愉快. 这一课我们来聊一聊Web程序员,Web的文化,如何成为一名优秀的Web程序员. 或许看完这部分,你会跃跃欲试,想要成为一名Web程序员也不一定.毕竟现在Web程序员还是比较吃香的. 第四部

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,