当前位置：首页 > 文章列表 > 文章 > 前端 > JsTraceToIX - 调试 React、Vue 和 Nodejs 变得更容易！ – 无需用“consolelog”弄乱您的代码库！

JsTraceToIX - 调试 React、Vue 和 Nodejs 变得更容易！ – 无需用“consolelog”弄乱您的代码库！

来源：dev.to 2024-10-30 21:42:40 0浏览收藏

哈喽！今天心血来潮给大家带来了《JsTraceToIX - 调试 React、Vue 和 Nodejs 变得更容易！ – 无需用“consolelog”弄乱您的代码库！》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

如果您曾经需要在 node 或 web 浏览器上调试 react 或 vue 组件、箭头函数或复杂表达式，您就会知道添加多个 console.log 语句和进行不必要的代码更改的痛苦。这就是 jstracetoix 发挥作用的地方！

项目链接

主要特点：

通过最少的代码更改来简化调试。
支持 react、vue 和 node.js 环境以及常规浏览器的调试。
轻松处理单行表达式和箭头函数。
轻松定义名称、过滤结果并覆盖输入和输出以实现更好的可追溯性。
简单的函数名称，如 c__ 和 d__，可以在捕获错误后轻松发现并删除痕迹。
与多线程环境无缝协作。

奖励：如果您使用 python，请查看 pytracetoix，它为您的 python 项目提供了同样强大的调试工具。

告别复杂、凌乱的调试——使用 jstracetoix，您可以一步捕获输入并显示结果，让调试更干净、更快！

查看 jstracetoix 并了解它如何简化您的调试过程。

安装

environment	require installation
browser	no
node.js	yes
react	optional
vue	yes

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 installation
import { 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 =>
        <tr key={product.id}>
            <td>{c__(product.title)}</td>
            <td>{d__(product.price + c__(citytax(product.price), { name: 'citytax' }))}</td>
        </tr>
    );

    return (
        <table><tbody>{listitems}</tbody></table>
    );
}

function app() {
    return (
        <div classname="app">
            <header classname="app-header">
                <shoppinglist />
            </header>
        </div>
    );
}

export default app;

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 < 1000 ? 1.10 : 1;

const prices = d__(products.map(product => 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 unreachable
for (const price in prices) {
    let value = price;
}