JsTraceToIX - Debugging React, Vue, and Node.js just got easier! – no need to clutter your codebase with `console.log`!

#react #node #javascript #webdev

If you've ever had to debug React or Vue components, arrow functions, or complex expressions on Node or the Web Browser, you know the pain of adding multiple console.log statements and making unnecessary code changes. That's where JsTraceToIX comes in!

Project Link

Key Features:

Simplifies debugging with minimal code changes.
Supports debugging of React, Vue, and Node.js environments, as well as regular browsers.
Handles single-line expressions and arrow functions with ease.
Easily define names, filter results, and override inputs and outputs for better traceability.
Simple function names, like c__ and d__, make it easy to spot and remove traces after catching the bug.
Works seamlessly with multithreaded environments.

Bonus: If you're working with Python, check out PyTraceToIX, which offers the same powerful debugging tools for your Python projects.

Say goodbye to complex and messy debugging – with JsTraceToIX, you can capture inputs and display results all in one step, making debugging cleaner and faster!

Check out JsTraceToIX and see how it can simplify your debugging process.

Installation

Environment	Require Installation
Browser	No
Node.js	Yes
React	Optional
Vue	Yes

npm install jstracetoix --save-dev

React Usage

In this example:

cityTax arrow function captures the input price and names it 'Price'.
On ShoppingList function:
- c__ captures the title in the first <td>.
- c__ captures the output of the cityTax and names it CityTax in the 2nd <td>.
- d__ displays the aggregated information in a single line: title, price, cityTax, total Price.

The d__ will generate this output:

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 Usage

In this example:

c__.allow() - overrides the input value being debugged when value > 40.00, for other values it doesn't captures the input.
d__.allow() - overrides the result value being debugged.
d__.after() - stops the program after displaying the result and the captured fields.

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;
}

Output

Environment	Default Output Function
Browser	console.debug
Node.js	process.stdout
React	console.debug
Vue	console.debug

Except for Node.js environment, the output is displayed in the browser's developer tools under the "Console Tab".
Since the output is generated using console.debug, it can easily be filtered out from regular console.log messages.

The default output function can be override using init__({'stream': new_stream.log })