JsTraceToIX - React、Vue、Node.js のデバッグがさらに簡単になりました。 – コードベースを「console.log」で乱雑にする必要はありません。-jsチュートリアル-php.cn

JsTraceToIX - React、Vue、Node.js のデバッグがさらに簡単になりました。 – コードベースを「console.log」で乱雑にする必要はありません。

Linda Hamilton

リリース： 2024-10-17 06:20:02

オリジナル

1004 人が閲覧しました

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

Node または Web ブラウザーで React または Vue コンポーネント、アロー関数、または複雑な式をデバッグしなければならなかったことがあれば、複数の console.log ステートメントを追加する苦労をご存知でしょう。不必要なコード変更を行うこと。そこで JsTraceToIX の出番です!

プロジェクトリンク

主な機能:

最小限のコード変更でデバッグを簡素化します。
通常のブラウザだけでなく、React、Vue、Node.js 環境のデバッグもサポートします。
単一行式とアロー関数を簡単に処理します。
トレーサビリティを向上させるために、名前の定義、結果のフィルタリング、入力と出力のオーバーライドを簡単に実行できます。
c__ や d__ などの単純な関数名を使用すると、バグを見つけた後に痕跡を見つけて削除するのが簡単になります。
マルチスレッド環境でシームレスに動作します。

ボーナス: Python を使用している場合は、Python プロジェクトに同じ強力なデバッグツールを提供する PyTraceToIX をチェックしてください。

複雑で煩雑なデバッグに別れを告げましょう – JsTraceToIX を使用すると、入力のキャプチャと結果の表示をすべて 1 ステップで実行できるため、デバッグがよりクリーンかつ高速になります!

JsTraceToIX をチェックして、デバッグプロセスがどのように簡素化されるかを確認してください。

インストール

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

npm install jstracetoix --save-dev

ログイン後にコピー

反応の使用法

この例では:

cityTax アロー関数は入力価格を取得し、「Price」という名前を付けます。
ShoppingList 関数:
- c__ は最初のでタイトルをキャプチャします。
- c__ は cityTax の出力をキャプチャし、2 番目のでそれに CityTax という名前を付けます。
- d__ は、タイトル、価格、市税、合計価格の集計情報を 1 行に表示します。

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

ログイン後にコピー

出力

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

Node.js 環境を除き、出力はブラウザの開発者ツールの「コンソールタブ」に表示されます。
出力は console.debug を使用して生成されるため、通常の console.log メッセージから簡単に除外できます。

デフォルトの出力関数は、init__({'stream': new_stream.log })

を使用してオーバーライドできます。