热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

采用firebug调试javascript(一)

本篇介绍两方面内容:1、firebug的安装。2、程序调试1.安装firebug1.1必须安装firefox浏览器。是人都会的哈。1.2在工具中选择“附加组件”

本篇介绍两方面内容:1、firebug的安装。2、程序调试

1. 安装firebug
1.1 必须安装firefox浏览器。是人都会的哈。
1.2 在工具中选择“附加组件”
 
在打开的附加组件管理器页面的右侧搜索栏中输入firebug
如果你还没有安装firebug,就会出现下面这个图标,点击安装

1.3 等待安装完毕,重启浏览器
2. 打开firebug查看js源码
2.1 首先用浏览器打开待查看的文件。这时候有两种方法可以打开firebug。
第一种是单击浏览器右上方的 图标
另一种是在页面中的任意位置点击鼠标右键,选择“使用firebug查看元素”
2.2 一般来说,会首先进入查看html元素的页面

2.3 单击上方的“脚本”,这个页面会显示


点击那个重新载入查看源代码


如果在该页面提示没有源代码,说明源代码中有语法错误,需要先修改语法错误。常见的错误有:括号不成对,缺少函数返回值,变量未定义,大小写错误等。

可以用这个函数检测代码中的语法错误

function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误:" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行:" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}
3. 调试js代码
3.1 建立断点

在想要建立断点的行前面单击鼠标左键。再次单击鼠标左键可取消断点。对于同一文件,再次打开时会记住之前断点行。
3.2 开始调试
回到html页面,按f5刷新该页面。firebug页面的程序就自动运行到一个断点了。(如果没有运行到,说明当前分支无法到达该点,请检查逻辑)
3.3 查看变量
在右侧的“监控”中可以显示当前断点的变量值

想要查看更多的变量,可以将鼠标移到变量上面,就会显示变量的当前值

也可以选中变量单击右键,在弹出框中选择“添加监控”,该数值就可以显示在监控栏里面了。

3.4 调试

通过右上方的按钮可以选择运行到下一个断点或者逐行运行。边运行边通过监控查看变量值,看程序是否正确运行。
3.5 修改程序
发现问题之后需要在一个文本编辑器中修改,我用的是Notepad++。修改代码之后保存,返回浏览器的html页面,按f5刷新,firebug中的代码就会自动刷新。然后继续3.1~3.4,直到程序没有错误。
3.6 建议边写程序边调试,写完程序就是正确的程序了。


推荐阅读
  • 本文介绍了在Mac上搭建php环境后无法使用localhost连接mysql的问题,并通过将localhost替换为127.0.0.1或本机IP解决了该问题。文章解释了localhost和127.0.0.1的区别,指出了使用socket方式连接导致连接失败的原因。此外,还提供了相关链接供读者深入了解。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • 如何实现JDK版本的切换功能,解决开发环境冲突问题
    本文介绍了在开发过程中遇到JDK版本冲突的情况,以及如何通过修改环境变量实现JDK版本的切换功能,解决开发环境冲突的问题。通过合理的切换环境,可以更好地进行项目开发。同时,提醒读者注意不仅限于1.7和1.8版本的转换,还要适应不同项目和个人开发习惯的需求。 ... [详细]
  • pyecharts 介绍
    一、pyecharts介绍ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部 ... [详细]
  • JavaWeb介绍概念JavaWeb,是用Java技术来解决相关web互联网领域的技术总和。web包括:web服务器和web客户端两部分。Java在客户端的应用有javaapplet,不过使 ... [详细]
  • FileReader详解与实例---读取并显示图像文件
    我们曾经在《HTML5中File对象初探》中,使用到了FileReader,在那篇文章中,它被用来将一个文件读取为二进制字符串,并通过xhr发送到后端形成交互。作为FileAPI的一部 ... [详细]
  • 首先,我有点像jQuerynoob和整个PHPnoob,所以如果这是一个愚蠢的问题,我感到很抱歉(尽管我已经搜索了Internet,尤其是这个网站的上下无法弄清我的意思.错了).另 ... [详细]
  • 前端提高篇(七十):SVG基本使用、基本样式、路径path
    SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范,与html5的使用有所区别SVG绘制出来的是矢量图,放大之后不会失真官方文 ... [详细]
  • 不确定是否有任何Firefox附加工具可用于检查JavaScript语法,var声明,甚至是预编译可用?我发现在webhtml页面中调试JavaScript非常困难.我必须在那里添 ... [详细]
  • ItriedtouseFirebugLite(viathebookmarkletandalsoaddingittooneofmywebsites).我尝试使用Fi ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • Unity3D引擎的体系结构和功能详解
    本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具,用于创建交互式3D应用程序。它由游戏引擎和编辑器组成,支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费,适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]
  • this prototype 闭包 总结
    this对象整理下思路:一般用到this中的情景:1.构造方法中functionA(){this.nameyinshen;}varanewA() ... [详细]
  • 图解BOM与DOM的区别与联系
    区别BOM(BrowserObjectModel)BOM即浏览器对象模型,BOM没有相关标准,BOM的最核心对象是window对象。window对象既为javascript访问浏览 ... [详细]
  • 前端~javascript~webAPI/文档对象模型Dom/Dom树/事件机制/操作元素/实战案例:实现网页计数器
    文章目录WebAPI简介DomDom树获取Dom元素事件事件三要素操作dom元素innerHTMLinnerText实战案例:实现网页计数器WebAPI简介什么是AP ... [详细]
author-avatar
挚友刘洋共
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有