JsTraceToIX – Das Debuggen von React, Vue und Node.js ist jetzt noch einfacher! – Sie müssen Ihre Codebasis nicht mit „console.log“ überladen!

Wenn Sie jemals React- oder Vue-Komponenten, Pfeilfunktionen oder komplexe Ausdrücke auf Node oder im Webbrowser debuggen mussten, wissen Sie, wie mühsam das Hinzufügen mehrerer console.log-Anweisungen ist unnötige Codeänderungen vornehmen. Hier kommt JsTraceToIX ins Spiel!

Projektlink

Hauptmerkmale:

• Vereinfacht das Debuggen mit minimalen Codeänderungen.
• Unterstützt das Debuggen von React-, Vue- und Node.js-Umgebungen sowie regulären Browsern.
• Verarbeitet einzeilige Ausdrücke und Pfeilfunktionen problemlos.
• Einfaches Definieren von Namen, Filtern von Ergebnissen und Überschreiben von Ein- und Ausgängenfür eine bessere Rückverfolgbarkeit.
• Einfache Funktionsnamen wie c__ und d__ erleichtern das Erkennen und Entfernen von Spuren, nachdem der Fehler entdeckt wurde.
• Funktioniert nahtlos mit Multithread- Umgebungen.

Bonus: Wenn Sie mit Python arbeiten, schauen Sie sich PyTraceToIX an, das die gleichen leistungsstarken Debugging-Tools für Ihre Python-Projekte bietet.

Verabschieden Sie sich vom komplexen und chaotischen Debuggen – mit JsTraceToIX können Sie Eingaben erfassen und Ergebnisse in einem Schritt anzeigen, wodurch das Debuggen sauberer und schneller wird!

Schauen Sie sich JsTraceToIX an und sehen Sie, wie es Ihren Debugging-Prozess vereinfachen kann.

Installation

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

npm install jstracetoix --save-dev

Reagieren Sie auf die Nutzung

In diesem Beispiel:

• Die CityTax-Pfeilfunktion erfasst den Eingabepreis und nennt ihn „Preis“.
• Auf ShoppingList-Funktion:
  • c__ erfasst den Titel im ersten .
  • c__ erfasst die Ausgabe der CityTax und nennt sie CityTax im 2. .
  • d__ zeigt die aggregierten Informationen in einer einzigen Zeile an: Titel, Preis, Stadtsteuer, Gesamtpreis.

Der d__ generiert diese Ausgabe:

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-Nutzung

In diesem Beispiel:

• c__.allow() – überschreibt den zu debuggenden Eingabewert, wenn der Wert > 40,00, Bei anderen Werten wird die Eingabe nicht erfasst.
• d__.allow() – überschreibt den zu debuggenden Ergebniswert.
• d__.after() – stoppt das Programm nach der Anzeige des Ergebnisses und der erfassten Felder.

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

Ausgabe

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

Mit Ausnahme der Node.js-Umgebung wird die Ausgabe in den Entwicklertools des Browsers unter der Registerkarte „Konsole“ angezeigt.
Da die Ausgabe mithilfe von console.debug generiert wird, kann sie problemlos aus regulären Console.log-Meldungen herausgefiltert werden.

Die Standardausgabefunktion kann mit init__({'stream': new_stream.log })

überschrieben werden

Metadaten

Die d__-Funktionsrückrufe ermöglichen, dass vorher und nachher Parameterdaten mit den zulässigen Eingaben sowie die folgenden Metaelemente empfangen werden:

• meta__: Liste der Metaschlüssel einschließlich des Namensschlüssels.
• thread_id__: thread_id wird ausgeführt
• allow_input_count__: Gesamtzahl der zulässigen Eingaben.
• input_count__: Gesamtzahl der erfassten Eingaben.
• allow__: Wenn false, war es erlaubt. Verwenden Sie dies für einen Rückruf.
• Ausgabe__: Text, der zuvor ohne neue_Zeile übergeben wurde.
• Name: Namensparameter

Dokumentation

Paketdokumentation

Das obige ist der detaillierte Inhalt vonJsTraceToIX – Das Debuggen von React, Vue und Node.js ist jetzt noch einfacher! – Sie müssen Ihre Codebasis nicht mit „console.log“ überladen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!