推荐Chrome作为开发工具(FF可以使用FireBug,IE8和之后的版本也有自己的调试工具)

1.HTML的调试

  • 将鼠标放在任意元素上,右键Inspect Element,即可查看该元素的HTML内容。(也可以通过F12打开开发者工具)

  

  效果如下

  

  • 在Elements面板中 将鼠标放在任意元素上,HTML界面上对应的元素会被选中
  • 右击元素,可以直接修改或者是移除元素,修改后的元素效果会马上反应在页面上

2.CSS的调试

  • 在开发者工具的右侧面板可以找到对应的CSS调试框

  

  • Styles分类下可以看到该元素的详细样式,而且你还可以直接修改它 (点击一个样式,或者双击空白处)
  • 样式的右侧会提示该样式来自哪个文件的哪一行
  • 被加了删除线的样式是无效的,或者被覆盖了
  • 将鼠标放在样式上的时候,右侧会出现一个CheckBox,用于启用和禁用当前样式

3.Javascript调试

  • 首先是Javascript调试框  
  • 左侧是javascript面板,可以加断点(绿色),当前正运行到的行(红色)
  • 位于script.js的下拉框可以选择不同的js文件调试,(如果你的js文件有结构错误,可能没法被加载到列表中)
  • 右上方是javascript内容搜索
  • Watch Expressions可以运行和查看表达式和变量
  • Call Stack显示当前堆栈,单击可以切换到堆栈中的不同位置
  • Scope variables,显示当前上下文变量
  • Breakpoints, 断点
  • console.log该方法会输出到Console中,(放弃alert吧,用调试和console.log)
  • 在Console可以直接运行javascript,很方便 (如果你要验证js,不需要写个新页面,直接在这里运行就是了)

  

  • 现在可以很方便的调试Javascript了,不过有的时候,你发现页面上元素被修改了,但是你不知道被什么代码修改了,那可以给DOM增加断点

  

  • 当ul中的元素被改变的时候触发断点,如下:(注意右边的堆栈,那可以帮你找到答案:谁动了你的奶酪)  

还有很多高级功能,例如资源和网络分析,javascript性能分析(内存泄漏)等等,有兴趣研究下

英文好的朋友看看楼下推荐的文章,挺详细的chrome调试

HTML/CSS/Javascript调试入门(转)的更多相关文章

  1. 【转】HTML, CSS和Javascript调试入门

    转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...

  2. JavaScript 基础入门

    JavaScript 基础入门   JavaScript 的组成 JS 由三部分组成,它们分别是:ECMAScript.DOM.BOM. ECMAScript     因为网景开发了JavaScrip ...

  3. JavaScript从入门到精通(转)

    JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...

  4. JavaScript快速入门(四)——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  5. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

  6. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  7. HTML|CSS之前端入门

    知识内容: 1.计算机网络综述 2.web基础 3.HTML与CSS介绍 4.JavaScript与jQuery介绍 一.计算机网络综述 1.什么是计算机网络 计算机网络是指将地理位置不同.具有独立功 ...

  8. 博皮设计:HTML/CSS/Javascript 源码共享

    首先感谢 sevennight 对我的大力帮助,由此他也成为了我的第一位园友:其次,由于本人并不了解 HTML/CSS,因此几乎都在 李宝亨 设计的 博皮源码 的基础上进行的修改:最后,为了获得 更加 ...

  9. Vim下的Web开发之html,CSS,javascript插件

    Vim下的Web开发之html,CSS,javascript插件   HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...

随机推荐

  1. json optString getString

    optString 和 getString 区别.   optString 当接收到的为空时候  不会报错

  2. FACE++学习二、获得face属性

    http://blog.csdn.net/lyq8479/article/details/17362685 为了防止网页丢失还是自己保存一份安全一点 人脸检测API介绍 在Face++网站的“API文 ...

  3. HDOJ 1319 Prime Cuts<数论>

    学会了不难.通过这道题学习了两点: 1:筛选法求素数. 2:在写比较长的程序的时候,给每个功能部分加上注释,思路会更清晰. 题意: 1.题目中所说的素数并不是真正的素数,包括1: 2.需要读懂题意,对 ...

  4. 将自己apk打包进其他apk安装思路

    把Apk 作为asset 资源编译进去,运行的时候释放出来再安装. dexclassloader加载. 动态加载. 把一个apk写成安装器,默认安装的话,需要root或者需要漏洞利用.

  5. 解决Only the original thread that created a view hierarchy can touch its views

    这种异常出现在子线程中处理UI操作产生的异常,将UI操作放在主线程中就OK了

  6. XHTML与HTML的差别

    HTML与XHTML之间的差别,粗略可以分为两大类比较:一个是功能上的差别,另外是书写习惯的差别.关于功能上的差别,主要是XHTML可兼容各大浏览器.手机以及PDA,并且浏览器也能快速正确地编译网页. ...

  7. 【HighCharts系列教程】十、图例属性——legend

    一.legend属性说明 Legend是HighCharts图表的图例属性,如图 默认情况下,HighCharts都会有图例,无特殊情况,默认即可满足需求,所以一般不用配置Legend属性. 二.la ...

  8. CodeForces 662D International Olympiad

    写出前几个找规律,然后直接输出. #include<cstdio> #include<cstring> #include<cmath> #include<al ...

  9. 添加<!doctype html>后造成JS写的定位失效

    今天同事找了一个悬浮广告的插件,但是一放入页面中就失效了,也没有报错,后来通过原文件对比,发现是加了<!doctype html>. 这样子定位并不起效果: document.getEle ...

  10. (中等) CF 555E Case of Computer Network,双连通+树。

    Andrewid the Android is a galaxy-known detective. Now he is preparing a defense against a possible a ...