热门标签 | 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 建议边写程序边调试,写完程序就是正确的程序了。


推荐阅读
  • 本文深入探讨了HTML5中十五个重要的新特性,为开发者提供了详细的指南。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 整合百度UEditor编辑器于ASP后端的实现步骤与技巧
    随着微软停止对XP系统的支持,公司已全面升级至Windows 7。早期网站创建时使用的编辑器仅兼容IE6浏览器,而如今系统更新后,原有的编辑器已无法满足新环境的需求。本文详细介绍了如何将百度UEditor编辑器整合到ASP后端,包括实现步骤和实用技巧,确保网站在新系统下仍能高效运行并提供良好的用户体验。 ... [详细]
  • 导读:今天编程笔记来给各位分享关于PHP的前端用什么工具的相关内容,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: ... [详细]
  • 本文详细介绍如何在VSCode中配置自定义代码片段,使其具备与IDEA相似的代码生成快捷键功能。通过具体的Java和HTML代码片段示例,展示配置步骤及效果。 ... [详细]
  • 开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ... [详细]
  • 首先,我有点像jQuerynoob和整个PHPnoob,所以如果这是一个愚蠢的问题,我感到很抱歉(尽管我已经搜索了Internet,尤其是这个网站的上下无法弄清我的意思.错了).另 ... [详细]
  • 不确定是否有任何Firefox附加工具可用于检查JavaScript语法,var声明,甚至是预编译可用?我发现在webhtml页面中调试JavaScript非常困难.我必须在那里添 ... [详细]
  • 本文探讨了领域驱动设计(DDD)的核心概念、应用场景及其实现方式,详细介绍了其在企业级软件开发中的优势和挑战。通过对比事务脚本与领域模型,展示了DDD如何提升系统的可维护性和扩展性。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • 本文探讨了如何为Web浏览器(如Firefox)添加全局热键(例如媒体控制键),并详细说明了实现这一功能所需的步骤,包括可能需要的Firefox扩展和Greasemonkey脚本。 ... [详细]
  • 本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条,包括垂直和水平滚动条的控制,以及特定元素的聚焦技术。 ... [详细]
  • 在使用Firefox浏览器打开本地HTML文件时,尝试调用Canvas的drawImage方法可能会遇到NS_ERROR_NOT_AVAILABLE错误。本文探讨了这一问题的原因及解决方案。 ... [详细]
  • 本文探讨了在使用HTML5 WebSocket技术构建浏览器内聊天室时遇到的连接不稳定问题,并提供了可能的解决方案和调试方法。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
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社区 版权所有