This content originally appeared on DEV Community and was authored by Alexandre Bento Freire
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!
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__andd__, 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:
-
cityTaxarrow function captures the input price and names it 'Price'. - On
ShoppingListfunction:-
c__captures the title in the first<td>. -
c__captures the output of the cityTax and names itCityTaxin 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 })
Metadata
The d__ function callbacks allow, before and after will receive a parameter data with the allowed inputs plus the following meta items:
-
meta__: list of meta keys including the name key. -
thread_id__: thread_id being executed -
allow_input_count__: total number of inputs that are allowed. -
input_count__: total number of inputs being captured. -
allow__: If false it was allowed. Use this foraftercallback. -
output__: Text passed tobeforewithoutnew_line. - name: name parameter
Documentation
This content originally appeared on DEV Community and was authored by Alexandre Bento Freire
Alexandre Bento Freire | Sciencx (2024-10-16T18:49:00+00:00) JsTraceToIX – Debugging React, Vue, and Node.js just got easier! – no need to clutter your codebase with `console.log`!. Retrieved from https://www.scien.cx/2024/10/16/jstracetoix-debugging-react-vue-and-node-js-just-got-easier-no-need-to-clutter-your-codebase-with-console-log/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.