调试工具系列--javascript的追踪者(tracer)实现

最新推荐文章于 2024-04-26 10:03:34 发布
原创 最新推荐文章于 2024-04-26 10:03:34 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#工具 #javascript #语言 #测试

写大量JavaScript代码时，用alert或在visual interDev设断点查看变量值会中断调试。因JavaScript无其他语言那样的控制台，无法在其他窗口显示信息，所以需自己实现一个，文中给出简单实现，还提到代码有错误不能直接嵌套，可点击打开测试页。
如果你要写大量的javascript代码，肯定要经常查看变量值，一般的方法是alert或者在visual interDev中设置断点。但是都会造成中断调试，这实在是件麻烦事。

javascript并没有其他语言那样的控制台，不能在其他窗口显示我们想要的信息，因此需要自己写一个。

我给出一个简单的实现，能够完成基本的需求。

javascript有错误，不能直接嵌套在本页面。
点击打开测试页
JavaScript跟踪器「JavaScript Tracker」-crx插件
03-09
在运行时跟踪网页上的JavaScript（DOM或jQuery API） 这个扩展是为web开发人员跟踪在运行时使用DOM或jQuery API来操纵网页上的html dom元素（例如，改变样式，附加事件监听器）的前端JavaScript。 将记录由页面操作触发的在运行时操作html dom元素的任何DOM / jQuery API。一旦在Chrome DevTools的Elements面板中选择了一个元素，元素面板旁边的边栏窗格“JS Tracker”将只显示操纵选定元素的代码的简要信息（文件，行，列和源代码）。 通过这个扩展，开发人员可以快速浏览所有可能的JavaScript代码，从而导致所选元素的意外行为。无需搜索所有脚本，数百甚至数千行代码，以确定可能的错误候选人，然后再开始处理错误。 Github：https：//github.com/pilagod/js-tracker 例如：https：//pilagod.github.io/js-tracker/example/ 建议非常欢迎上面的github链接，希望你能得到更好的调试网页的调试体验：） 支持语言:English
spy-js：spy-js：javascript跟踪工具
02-22
spy-js博客文章和截屏视频 spy-js可用性 该项目是IntelliJ产品线的一部分，spy-js与WebStorm和IndelliJ IDEA Ultimate Edition捆绑在一起，可以作为PhpStorm，RubyMine和PyCharm Professional Edition的使用。 您可以观看7分钟的并阅读。 spy-js文档 有关完整文档，请访问。 本文档涵盖WebStorm Web帮助中未涵盖（或简要介绍）的各种主题，并且包含： [Karma Runner]（＃karma-runner） 如果文档中描述的内容对您不起作用，请检查是否为。 随时或提出。 概述 简而言之，spy-js是JavaScript开发人员的工具，当在不同平台/浏览器/设备上运行时，该工具允许简单地调试/跟踪/配置JavaScript。 它填补了现有浏览器开发工具所存在的空白，并从不同角度解决
trace() js
Iloveskr
12-06 498
查看函数是如何运行（运行轨迹）的 直接引用就可以了 console.trace();
探索高效JavaScript性能追踪：JStrace详解
最新发布
gitblog_00032的博客
04-26 439
探索高效JavaScript性能追踪：JStrace详解 是一个轻量级、高性能的JavaScript性能监控库，它允许开发者深入理解他们的应用在运行时的行为，从而定位和修复性能瓶颈。通过提供实时的CPU事件追踪，JStrace为前端优化提供了宝贵的洞察力。 技术分析 JStrace的核心是基于Web Worker的，这使得它可以在不阻塞主线程的情况下执行追踪任务。其API设计简洁，易于集成到任何现...
trace:JavaScript调试、测试、错误监测上报工具
07-04
trace.js JavaScript代码调试、测试、错误监测上报工具，提供各浏览器下统一的日志控制台，兼容包括IE6在内的所有主流浏览器。超轻量级工具。 使用方法 开发时在页面里引入trace.js： [removed][removed] 在浏览器里打开页面，按组合键 Alt + ~ 即可打开日志控制台。 日志控制台的操控方法及快捷键使用请查看日志控制台右上角的 Help 菜单。 为提高线上的性能或者减小JS文件大小，上线时可换成trace-online.js： [removed][removed] 当然也可以不换。trace-online.js里的代码请自行按照业务需求修改。 API文档 trace(value1, value
saml_tracer-1.6-an+fx.xpi.7z
05-18
【标题】"saml_tracer-1.6-an+fx.xpi.7z" 提供的是一个用于SAML（Security Assertion Markup Language）协议追踪的Firefox扩展。SAML是一种基于XML的标准化身份验证和授权框架，它允许不同服务提供商和服务消费者...
正则表达式调试利器Regex.Match.Tracer v2.1 实用工具推荐
正则工具Regex.Match.Tracer.v.2.1.Cr是一款专为开发人员设计的辅助工具，主要用于编写、测试和调试正则表达式。正则表达式（Regular Expression，简称Regex）是一种用于字符串匹配和处理的强大工具，广泛应用于文本...
Regex Match Tracer 正则表达式 测试工具
08-21
Regex Match Tracer是一款强大的正则表达式测试工具，专为开发者和数据处理人员设计，用于调试和验证正则表达式的正确性。它提供了一个直观的界面，帮助用户理解正则表达式的匹配过程，从而提高工作效率。 正则...
正则表达式匹配追踪器：解压即用的调试工具
- 多种正则表达式引擎支持：有些调试工具可以支持不同的编程语言或正则表达式引擎，如PCRE、Python、JavaScript等，使得调试结果更加准确。 #### 使用场景和优势 “regex match tracer”类工具的使用场景包括但不...
正则表达式匹配追踪工具
正则表达式匹配追踪工具是一种专为开发人员、系统管理员以及数据处理工程师设计的实用型软件工具，旨在帮助用户更高效地调试、验证和分析正则表达式（Regular Expression，简称Regex）在实际文本中的匹配行为。...
nodejs-traceroute：围绕tracert和traceroute流程的Node.js包装器
02-03
nodejs跟踪路由 围绕Tracert和TraceRoute流程的Node.js包装器 安装 npm install --save nodejs-traceroute 强制使用IPv4或IPv6 默认情况下，给出的域名将自动解析。 通过将ipv4或ipv6传递给构造函数来显式强制进行IPv4或IPv6跟踪。 使用范例 const Traceroute = require ( 'nodejs-traceroute' ) ; try { const tracer = new Traceroute ( ) ; tracer . on ( 'pid' , ( pi
frida-trace:通过Frida声明式跟踪API
05-06
弗里达·痕迹 通过声明式跟踪API。 例子 const trace = require ( 'frida-trace' ) ; const func = trace . func ; const argIn = trace . argIn ; const argOut = trace . argOut ; const retval = trace . retval ; const types = trace . types ; const pointer = types . pointer ; const INT = types . INT ; const POINTER = types . POINTER ; const UTF8 = types . UTF8 ; trace ( { module : 'libsqlite3.dylib' , functions : [
jsEventTracer:跟踪JS事件的调试工具
05-05
jsEventTracer 跟踪JS事件的调试工具 支持IE9和更高版本，Edge，FireFox，Chrome，Safari，WebKit等 演示 如果可用，将使用jQuery，否则将使用标准DOM事件处理程序。 要禁用jQuery，请在jQuery之前加载或定义jsEventTrace.jQuery = false;。 您可以使用jsEventTrace.logLevel = newLevel更改logLevel； 将logLevel设置为0将禁用所有跟踪 您可以通过覆盖jsEventTrace.logEvent来编写自己的事件显示处理程序，有关示例，请参见演示
Cisco Packet Tracer-网络工程技术课-3.8实验1 思科模拟器Packet Tracer初识和常用调试命令
Lulutia的博客
03-13 2282
实验1 思科模拟器Packet Tracer初识和常用调试命令 实验目的： （1）了解各类网络模拟器Packer tracer, GNS3, eNSP, EVE, RouterSim, Dynamips,H3C的HLC，学习思科模拟器Packet Tracer的常用使用方法，含安装、显示设置、网络各类设备初识、线缆连接、调试测试、数据包抓包分析和流程动画等； （2）掌握常用TCP/IP网络调试命令的使用方法； （3）一个小型Packet Tracer配置的基础案例设计和测试； 实验内容： （1）Packer
js-调试技巧-查看某个变量的数据类型？
weixin_33845477的博客
05-07 934
为什么80%的码农都做不了架构师？>>> ...
使用TraceGL可视化跟踪JavaScript代码流
cpongo5
06-17 302
Rik Arends发布了TraceGL，这是个可以跟踪调试（trace debugging）JavaScript应用程序的新工具。为便于调试和理解那些复杂的基于浏览器和Node.js开发的应用程序，这个工具将应用程序的执行轨迹捕获并可视化，从而使得用户能够在运行时浏览应用程序的执行轨迹。\\TraceGL由两部分构成：一个基于Node.js的服务器和一个运行于浏览器中的基于WebGL的客户端。这...
nodejs tracer 模块实现日志跟踪
在梦中享一刻静谧，等待梦中的你
08-05 3621
转自：https://github.com/baryon/tracer   var logger = require('tracer').console(); logger.log('hello'); logger.trace('hello', 'world'); logger.debug('hello %s', 'world', 123); logger.info('hello %s %
JavaScript开发必备！这四款静态代码分析工具你了解吗？
weixin_43703144的博客
03-08 1852
随着现代软件开发实践的兴起，静态分析的重要性日益增强。静态代码分析使开发人员可以提高代码库的可读性和一致性，同时发现可能的错误和反模式。静态分析工具可帮助我们验证现代开发标准并评估其质量。 世界各地的大多数软件开发团队一直在使用静态代码分析工具。静态代码分析可识别错误和冗余的代码，并在将其投入生产之前对其进行修复。使用自动静态分析，我们不需要依赖动态分析，因为动态分析需要在处理器上执行代码来识别错误。 让我们看一下可以使用的一些最佳JavaScript静态分析工具。 为什么要对JavaScript使用静态分
一个简单Tracer类,用来为应用写入跟踪
一竿残照.金棣@youkuaiyun.com
06-11 1930
===================类的代码=========================={*******************************************************} {                                                       } {       CodeMachine                
Hapi插件lib-hapi-good-tracer实现请求跟踪与日志集成
这表明该插件的主文件或入口文件名为lib-hapi-good-tracer-main.js或lib-hapi-good-tracer-main/index.js，这是开发者在项目中需要引用的主要文件。 通过以上知识点，开发者可以对lib-hapi-good-tracer插件的功能、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值