JsTraceToIX - Le débogage de React, Vue et Node.js est devenu plus facile ! – pas besoin d'encombrer votre base de code avec `console.log` !

Si vous avez déjà dû déboguer des composants React ou Vue, des fonctions fléchées ou des expressions complexes sur Node ou le navigateur Web, vous connaissez la difficulté d'ajouter plusieurs instructions console.log et apporter des modifications de code inutiles. C'est là qu'intervient JsTraceToIX !

Lien du projet

Caractéristiques principales :

• Simplifie le débogage avec modifications minimales du code.
• Prend en charge le débogage des environnements React, Vue et Node.js, ainsi que des navigateurs classiques.
• Gère facilement les expressions sur une seule ligne et les fonctions fléchées.
• Définissez facilement les noms, filtrez les résultats et remplacez les entrées et les sorties pour une meilleure traçabilité.
• Des noms de fonctions simples, comme c__ et d__, permettent de repérer et de supprimer facilement les traces après avoir détecté le bug.
• Fonctionne de manière transparente avec les environnements multithread.

Bonus : Si vous travaillez avec Python, consultez PyTraceToIX, qui offre les mêmes outils de débogage puissants pour vos projets Python.

Dites adieu au débogage complexe et compliqué : avec JsTraceToIX, vous pouvez capturer les entrées et afficher les résultats en une seule étape, ce qui rend le débogage plus propre et plus rapide !

Découvrez JsTraceToIX et voyez comment il peut simplifier votre processus de débogage.

Installation

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

npm install jstracetoix --save-dev

Réagir à l'utilisation

Dans cet exemple :

• La fonction fléchée cityTax capture le prix d'entrée et le nomme « Prix ».
• Sur la fonction ShoppingList :
  • c__ capture le titre dans le premier .
  • c__ capture la sortie de cityTax et la nomme CityTax dans le 2ème .
  • d__ affiche les informations agrégées sur une seule ligne : titre, prix, cityTax, prix total.

Le d__ générera cette sortie :

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;

Utilisation de Node.js

Dans cet exemple :

• c__.allow() - remplace la valeur d'entrée en cours de débogage lorsque la valeur > 40h00, pour les autres valeurs, il ne capture pas l'entrée.
• d__.allow() - remplace la valeur du résultat en cours de débogage.
• d__.after() - arrête le programme après avoir affiché le résultat et les champs capturés.

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

Sortir

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

Sauf pour l'environnement Node.js, la sortie est affichée dans les outils de développement du navigateur sous « l'onglet Console ».
Étant donné que la sortie est générée à l’aide de console.debug, elle peut facilement être filtrée des messages console.log classiques.

La fonction de sortie par défaut peut être remplacée en utilisant init__({'stream': new_stream.log })

Métadonnées

Les rappels de la fonction d__ permettent, avant et après, de recevoir des données de paramètre avec les entrées autorisées ainsi que les méta-éléments suivants :

• meta__ : liste des méta-clés incluant la clé de nom.
• thread_id__ : thread_id en cours d'exécution
• allow_input_count__ : nombre total d'entrées autorisées.
• input_count__ : nombre total d'entrées capturées.
• allow__ : si faux, cela était autorisé. Utilisez-le après le rappel.
• output__ : texte transmis avant sans new_line.
• nom : paramètre de nom

Documentation

Documentation du package

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!