JsTraceToIX - React、Vue、Node.js のデバッグがさらに簡単になりました。 – コードベースを「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 })

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

メタデータ

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

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

ドキュメント

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

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