HTML/CSS/Javascript调试入门(转)
推荐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调试入门(转)的更多相关文章
- 【转】HTML, CSS和Javascript调试入门
转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...
- JavaScript 基础入门
JavaScript 基础入门 JavaScript 的组成 JS 由三部分组成,它们分别是:ECMAScript.DOM.BOM. ECMAScript 因为网景开发了JavaScrip ...
- JavaScript从入门到精通(转)
JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...
- JavaScript快速入门(四)——JavaScript函数
函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
- IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- HTML|CSS之前端入门
知识内容: 1.计算机网络综述 2.web基础 3.HTML与CSS介绍 4.JavaScript与jQuery介绍 一.计算机网络综述 1.什么是计算机网络 计算机网络是指将地理位置不同.具有独立功 ...
- 博皮设计:HTML/CSS/Javascript 源码共享
首先感谢 sevennight 对我的大力帮助,由此他也成为了我的第一位园友:其次,由于本人并不了解 HTML/CSS,因此几乎都在 李宝亨 设计的 博皮源码 的基础上进行的修改:最后,为了获得 更加 ...
- Vim下的Web开发之html,CSS,javascript插件
Vim下的Web开发之html,CSS,javascript插件 HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...
随机推荐
- json optString getString
optString 和 getString 区别. optString 当接收到的为空时候 不会报错
- FACE++学习二、获得face属性
http://blog.csdn.net/lyq8479/article/details/17362685 为了防止网页丢失还是自己保存一份安全一点 人脸检测API介绍 在Face++网站的“API文 ...
- HDOJ 1319 Prime Cuts<数论>
学会了不难.通过这道题学习了两点: 1:筛选法求素数. 2:在写比较长的程序的时候,给每个功能部分加上注释,思路会更清晰. 题意: 1.题目中所说的素数并不是真正的素数,包括1: 2.需要读懂题意,对 ...
- 将自己apk打包进其他apk安装思路
把Apk 作为asset 资源编译进去,运行的时候释放出来再安装. dexclassloader加载. 动态加载. 把一个apk写成安装器,默认安装的话,需要root或者需要漏洞利用.
- 解决Only the original thread that created a view hierarchy can touch its views
这种异常出现在子线程中处理UI操作产生的异常,将UI操作放在主线程中就OK了
- XHTML与HTML的差别
HTML与XHTML之间的差别,粗略可以分为两大类比较:一个是功能上的差别,另外是书写习惯的差别.关于功能上的差别,主要是XHTML可兼容各大浏览器.手机以及PDA,并且浏览器也能快速正确地编译网页. ...
- 【HighCharts系列教程】十、图例属性——legend
一.legend属性说明 Legend是HighCharts图表的图例属性,如图 默认情况下,HighCharts都会有图例,无特殊情况,默认即可满足需求,所以一般不用配置Legend属性. 二.la ...
- CodeForces 662D International Olympiad
写出前几个找规律,然后直接输出. #include<cstdio> #include<cstring> #include<cmath> #include<al ...
- 添加<!doctype html>后造成JS写的定位失效
今天同事找了一个悬浮广告的插件,但是一放入页面中就失效了,也没有报错,后来通过原文件对比,发现是加了<!doctype html>. 这样子定位并不起效果: document.getEle ...
- (中等) CF 555E Case of Computer Network,双连通+树。
Andrewid the Android is a galaxy-known detective. Now he is preparing a defense against a possible a ...