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

プロジェクトリンク

主な機(jī)能:

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

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

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

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

インストール

npm install jstracetoix --save-dev

反応の使用法

この例では:

• cityTax アロー関數(shù)は入力価格を取得し、「Price」という名前を付けます。
• ShoppingList 関數(shù):
  • c__ は最初の でタイトルをキャプチャします。
  • c__ は cityTax の出力をキャプチャし、2 番目の でそれに CityTax という名前を付けます。
  • d__ は、タイトル、価格、市稅、合計(jì)価格の集計(jì)情報(bào)を 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() - デバッグ中の結(jié)果値をオーバーライドします。
• d__.after() - 結(jié)果とキャプチャされたフィールドを表示した後にプログラムを停止します。

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

出力

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

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

メタデータ

d__ 関數(shù)コールバックでは、その前後で、許可された入力と次のメタ項(xiàng)目を含むパラメーター データを受け取ることができます。

• meta__: 名前キーを含むメタキーのリスト。
• thread_id__: 実行中の thread_id
• allow_input_count__: 許可される入力の総數(shù)。
• input_count__: キャプチャされる入力の総數(shù)。
• allow__: false の場合、許可されました。コールバック後にこれを使用します。
• Output__: new_line なしで前に渡されたテキスト。
• 名前: 名前パラメータ

ドキュメント

パッケージのドキュメント

以上がJsTraceToIX - React、Vue、Node.js のデバッグがさらに簡単になりました。 – コードベースを「console.log」で亂雑にする必要はありません。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。