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

javascript的调试工具是什么

调试工具有:1、Web浏览器的开发人员工具,如用控制台语句“console.log()”,或使用debugger语句暂停代码执行;2、Postman,调试接口工具,可以调整请求,分析响应和调试问题;3、Sentry,可用于监视错误和提取执行适当的事后操作所需的所有信息;4、JSHint,一个JS代码分析检测工具;5、Firebug,可帮助开发者发现代码发现错误的错误并解决错误。

调试工具有:1、Web浏览器的开发人员工具,如用控制台语句“console.log()”,或使用debugger语句暂停代码执行;2、Postman,调试接口工具,可以调整请求,分析响应和调试问题;3、Sentry,可用于监视错误和提取执行适当的事后操作所需的所有信息;4、JSHint,一个JS代码分析检测工具;5、Firebug,可帮助开发者发现代码发现错误的错误并解决错误。

本教程操作环境:windows7系统、Javascript1.8.5版、Dell G3电脑。

应用程序漏洞,前端调试人员的秃头之源。如果您一直从事前端工作,就会知道修复应用程序漏洞有多么困难。

特别是使用Javascript时,一个很小错误有时可能需要几个小时来调试。然而,对于不同的浏览器、操作系统和设备而言,存在漏洞是不可避免的。

针对Bug的工具很多,但不是每一个都能称得上是“Bug的噩梦”,有些工具的性能比其他工具更好。本文就将为你介绍这些发现、诊断和修复漏洞的小帮手。

Web浏览器的开发人员工具

任何现代的网页浏览器都配备了强大的工具来帮助你调试应用程序。它可以简单到使用console.log()的控制台语句、使用alert()的弹出窗口,甚至使用调试器语句来暂停代码执行。这些工具在调试任务中非常有用,特别是调试器语句。

还可以使用network inspector或CSS styles inspector使调试更加容易和顺畅。你可以简单地在谷歌上进行搜索,了解一下有关浏览器的开发人员工具的更多信息。

Postman

几乎所有前端应用程序都会发送和接收JSON的响应和请求。应用程序与一个应用程序接口连接,这个接口可以做许多事情,例如身份验证、用户数据传输,甚至一些简单的事情,例如获取您位置的当前天气信息。

Postman是最好的JS工具之一,用于调试请求和响应。它也为macOS系统、Windows系统和Linux系统提供软件。它能快速、简单地直接发送REST、SOAP和GraphQL请求。

使用Postman,可以调整请求、分析响应和修复漏洞问题。当不确定问题出在前端还是后端时,它很有用。

sentry

一旦发布了某个应用程序,它就会在各种设备上运行。在任何软件开发生命周期中,测试阶段都是作为标准过程实现的。此阶段包括单元测试、系统测试、集成测试等。

但是,你总是有可能忽视掉某个漏洞,并让其继续生产。即使在发布之后,如果没有任何人通知,你也不会意识到任何还存在的漏洞。终端用户很少会通过已提供的电子邮件报告相关漏洞。这就是Sentry发挥作用的地方。

基于云的错误日志系统(如Sentry)可以帮助您记录错误实例,即使在发布之后也是如此。Sentry提供了涵盖大多数可用框架的全面解决方案。

Sentry适用的语言和框架

BrowserStack

BrowserStack可以帮助模拟用户遇到错误时的准确环境。设备+操作系统+浏览器的强大组合工具绝对是必备的。您可以通过使用Sentry之类的错误日志工具来充分利用它。

当您记录错误时,您可以通过引用环境并在BrowserStack中重新创建它来重现准确的场景。

他们为自由职业者提供更低的价格,为开源项目提供免费许可。

JSHint

这是一个检测JS代码中的错误和潜在问题的静态代码分析工具,可以帮助开发人员发现很难发现的问题。

JSHint扫描用Javascript编写的程序,报告常见的错误和潜在的漏洞,可能是语法错误、隐式类型转换导致的漏洞、泄漏变量或其他一些问题。

下面是我用来观察JSHint运行的一个示例函数:

Firebug

Firebug是一个非常强大的工具,可以帮助您发现代码发现错误的错误并解决错误。

在此我们使用Firebug来处理Javascript代码。

首先我们需要加载页面并打开Firebug。

有时候您需要重新载入页面。

在状态栏的错误数

显示当前页面的错误

显示错误的详细信息

一步步调试代码

你可以一步步的执行代码。这对代码调试非常有用。

使用断点调试

断点调试可以终止代码的执行,你可以通过指定代码范围来查看错误是不是在指定代码范围内。这对于 错误调试很有用。

如果你点击"Step over(单步跳过)" 按钮, Firebug 会更新所有变量直到你在右侧窗口中终止断点执行。

使用表达式让断点工作

你可以写一个表达式,在条件为真时,断点会停止代码的执行。

Fiddler

Fiddler是一个本地代理服务器,需要将浏览器设置为本地代理服务器上网才可以使用,Fiddler会监控所有的浏览器请求,并有能力在浏览器请求中插入数据。

在web前端开发的过程中,fiddler是最常使用的一款调试工具。在大多数情况下,通过fiddler默认菜单的功能就可以基本满足开发者的调试需求,然而如果需要满足更复杂的调试场景时,单纯通过fiddler菜单已无法达到开发者的调试要求。

如果用户需要修改http请求的头部或者修改http请求的应答头部,只能通过设置断点的方式,设置断点有两种方法:

第一种:打开Fiddler 点击Rules-> Automatic Breakpoint ->Before Requests(这种方法会中断所有的会话),消除断点的方法,点击Rules-> Automatic Breakpoint ->Disabled。

第二种: 在命令行中输入命令: bpu http://www.qq.com,这种方法只会中断http://www.qq.com,消除断点的方法就是在命令行中输入命令 bpu。

但是这两种方法当程序运行到断点处的时候都会停止,需要手动点击“Run to Completion”重新启动,非常不方便。而且通过fiddler的菜单功能,无法修改http请求的URI。此时Fiddler Script的优点就体现出来了,Fiddler Script的本质其实是用JScript.NET语言写的一个脚本文件CustomRules.js,语法类似于C#, 通过修改CustomRules.js可以很容易的修改http的请求和应答,不用中断程序,还可以针对不同的URI做特殊的处理,除此之外还可以根据开发者的需要去定制菜单。

HttpWatch

HttpWatch是一款商业软件,并以插件的形式嵌入在浏览器中,仅仅是一个专业的Web Sniffer。


推荐阅读
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
    在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
  • CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中,iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表,包括编写脚本文件 `/usr/local/sbin/iptables.sh`,并使用 `iptables -F` 清空现有规则。此外,还深入探讨了 NAT 表的配置方法,帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 在 Axublog 1.1.0 版本的 `c_login.php` 文件中发现了一个严重的 SQL 注入漏洞。该漏洞允许攻击者通过操纵登录请求中的参数,注入恶意 SQL 代码,从而可能获取敏感信息或对数据库进行未授权操作。建议用户尽快更新到最新版本并采取相应的安全措施以防止潜在的风险。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
author-avatar
mobiledu2502863723
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有