如果您曾经需要在 node 或 web 浏览器上调试 react 或 vue 组件、箭头函数或复杂表达式，您就会知道添加多个 console.log 语句和进行不必要的代码更改的痛苦。这就是 jstracetoix 发挥作用的地方！
项目链接
主要特点：
通过最少的代码更改来简化调试。支持 react、vue 和 node.js 环境以及常规浏览器的调试。轻松处理单行表达式和箭头函数。轻松定义名称、过滤结果并覆盖输入和输出以实现更好的可追溯性。简单的函数名称，如 c__ 和 d__，可以在捕获错误后轻松发现并删除痕迹。与多线程环境无缝协作。
奖励：如果您使用 python，请查看 pytracetoix，它为您的 python 项目提供了同样强大的调试工具。
立即学习“前端免费学习笔记（深入）”；
告别复杂、凌乱的调试——使用 jstracetoix，您可以一步捕获输入并显示结果，让调试更干净、更快！
查看 jstracetoix 并了解它如何简化您的调试过程。
安装
browsernonode.jsyesreactoptionalvueyes
npm install jstracetoix --save-dev
反应用法
在此示例中：
citytax 箭头函数捕获输入价格并将其命名为“price”。关于 shoppinglist 功能：c__ 捕获第一个 中的标题。c__ 捕获 citytax 的输出，并在第二个 中将其命名为 citytax。d__ 在一行中显示聚合信息：标题、价格、城市税、总价。
d__ 将生成以下输出：
i0:`rice` | price:`10` | citytax:`5` | _:`15`i0:`coffee` | price:`30` | citytax:`15` | _:`45`i0:`shoes` | price:`100` | citytax:`15` | _:`115`
import './app.css';// without local installationimport { c__, d__ } from 'https://cdn.jsdelivr.net/gh/a-bentofreire/jstracetoix@1.1.0/component/jstracetoix.mjs';// if it's installed locally via "npm install jstracetoix --save-dev"// import { c__, d__ } from 'jstracetoix/component/jstracetoix.mjs';const citytax = (price) => c__(price, {name: 'price'}) > 20 ? 15 : 5;const products = [ { title: 'rice', price: 10, id: 1 }, { title: 'coffee', price: 30, id: 2 }, { title: 'shoes', price: 100, id: 3 },];function shoppinglist() { const listitems = products.map(product => {c__(product.title)} {d__(product.price + c__(citytax(product.price), { name: 'citytax' }))} ); return ( node.js 用法
在此示例中：
c__.allow() – 当值 > 40.00 时覆盖正在调试的输入值，对于其他值，它不会捕获输入。d__.allow() – 覆盖正在调试的结果值。d__.after() – 显示结果和捕获的字段后停止程序。
import { c__, d__ } from 'jstracetoix';const products = [ { "name": "Smartphone 128GB", "price": 699.00 }, { "name": "Coffee Maker", "price": 49.99 }, { "name": "Electric Toothbrush", "price": 39.95 }, { "name": "4K Ultra HD TV", "price": 999.99 }, { "name": "Gaming Laptop", "price": 1299.00 }];const factor = (price) => price c__(product.price, { allow: (index, name, value) => value > 40.00 ? Math.floor(value * factor(value)) : false, name: product.name.substring(0, 10) })), { allow: (data) => data._.map((v, i) => `${i}:${v}`), after: (data) => process.exit() // exits after displaying the results});// Smartphone:`768` | Coffee Mak:`54` | 4K Ultra H:`1099` | Gaming Lap:`1299` | _:`["0:699","1:49.99","2:39.95","3:999.99","4:1299"]`// this code is unreachablefor (const price in prices) { let value = price;}
输出
browserconsole.debugnode.jsprocess.stdoutreactconsole.debugvueconsole.debug
除 node.js 环境外，输出显示在浏览器开发者工具的“控制台选项卡”下。
由于输出是使用 console.debug 生成的，因此可以轻松地从常规 console.log 消息中过滤掉它。
可以使用 init__({‘stream’: new_stream.log })
覆盖默认输出函数
元数据
d__ 函数回调允许，before 和 after 将接收一个参数数据，其中包含允许的输入以及以下元项：
meta__：元键列表，包括名称键。thread_id__: 正在执行的thread_idallow_input_count__: 允许输入的总数。input_count__：捕获的输入总数。allow__：如果为 false，则允许。在回调后使用它。output__：传递给之前的文本，不带 new_line。名称：名称参数
文档
软件包文档
以上就是JsTraceToIX – 调试 React、Vue 和 Nodejs 变得更容易！ – 无需用“consolelog”弄乱您的代码库！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1493311.html
微信扫一扫 
支付宝扫一扫 
