JsTraceToIX - Menyahpepijat React, Vue dan Node.js semakin mudah! – tidak perlu mengacaukan pangkalan kod anda dengan `console.log`!

Jika anda pernah terpaksa menyahpepijat komponen React atau Vue, fungsi anak panah atau ungkapan kompleks pada Node atau Penyemak Imbas Web, anda tahu keperitan menambah berbilang pernyataan console.log dan membuat perubahan kod yang tidak perlu. Di situlah JsTraceToIX masuk!

Pautan Projek

Ciri Utama:

• Memudahkan penyahpepijatan dengan perubahan kod minimum.
• Menyokong penyahpepijatan persekitaran React, Vue dan Node.js, serta penyemak imbas biasa.
• Mengendalikan ungkapan satu baris dan fungsi anak panah dengan mudah.
• Dengan mudah takrifkan nama, penapis hasil dan ganti input dan output untuk kebolehkesanan yang lebih baik.
• Nama fungsi yang ringkas, seperti c__ dan d__, memudahkan untuk mengesan dan mengalih keluar kesan selepas menangkap pepijat.
• Berfungsi dengan lancar dengan persekitaran berbilang benang.

Bonus: Jika anda menggunakan Python, lihat PyTraceToIX, yang menawarkan alat penyahpepijatan berkuasa yang sama untuk projek Python anda.

Ucapkan selamat tinggal kepada penyahpepijatan yang rumit dan tidak kemas – dengan JsTraceToIX, anda boleh menangkap input dan memaparkan hasil semua dalam satu langkah, menjadikan penyahpepijatan lebih bersih dan lebih pantas!

Lihat JsTraceToIX dan lihat cara ia boleh memudahkan proses penyahpepijatan anda.

Pemasangan

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

npm install jstracetoix --save-dev

Reaksi Penggunaan

Dalam contoh ini:

• Fungsi anak panah cityTax menangkap harga input dan menamakannya 'Harga'.
• Pada fungsi ShoppingList:
  • c__ menangkap tajuk dalam pertama.
  • c__ menangkap output cityTax dan menamakannya CityTax dalam ke-2.
  • d__ memaparkan maklumat agregat dalam satu baris: tajuk, harga, cukai bandar, jumlah Harga.

D__ akan menjana output ini:

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;

Penggunaan Node.js

Dalam contoh ini:

• c__.allow() - mengatasi nilai input yang dinyahpepijat apabila nilai > 40.00, untuk nilai lain ia tidak menangkap input.
• d__.allow() - mengatasi nilai hasil yang sedang dinyahpepijat.
• d__.after() - menghentikan program selepas memaparkan hasil dan medan yang ditangkap.

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

Keluaran

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

Kecuali untuk persekitaran Node.js, output dipaparkan dalam alat pembangun penyemak imbas di bawah "Tab Konsol".
Memandangkan output dijana menggunakan console.debug, ia boleh ditapis keluar dengan mudah daripada mesej console.log biasa.

Fungsi output lalai boleh ditindih menggunakan init__({'stream': new_stream.log })

Metadata

Panggil balik fungsi d__ membenarkan, sebelum dan selepas akan menerima data parameter dengan input yang dibenarkan serta item meta berikut:

• meta__: senarai kunci meta termasuk kunci nama.
• thread_id__: thread_id sedang dilaksanakan
• allow_input_count__: jumlah bilangan input yang dibenarkan.
• input_count__: jumlah bilangan input yang ditangkap.
• allow__: Jika palsu ia dibenarkan. Gunakan ini untuk selepas panggilan balik.
• output__: Teks dihantar ke sebelumnya tanpa new_line.
• nama: parameter nama

Dokumentasi

Dokumentasi Pakej

Atas ialah kandungan terperinci JsTraceToIX - Menyahpepijat React, Vue dan Node.js semakin mudah! – tidak perlu mengacaukan pangkalan kod anda dengan `console.log`!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!