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

원래의

1034명이 탐색했습니다.

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

Node나 웹 브라우저에서 React 또는 Vue 구성 요소, 화살표 함수 또는 복잡한 표현식을 디버깅해야 했던 적이 있다면 여러 개의 console.log 문을 추가하고 불필요한 코드 변경 JsTraceToIX가 바로 여기에 있습니다!

프로젝트 링크

주요 기능:

최소한의 코드 변경으로 디버깅을 단순화합니다.
React, Vue, Node.js 환경과 일반 브라우저의 디버깅을 지원합니다.
한 줄 표현과 화살표 함수를 쉽게 처리합니다.
쉽게 이름을 정의하고, 결과를 필터링하고, 입력과 출력을 재정의하여 추적성을 향상합니다.
c__ 및 d__와 같은 간단한 함수 이름을 사용하면 버그를 잡은 후 추적을 쉽게 찾아 제거할 수 있습니다.
멀티스레드 환경과 원활하게 작동합니다.

보너스: Python으로 작업하는 경우 Python 프로젝트에 동일한 강력한 디버깅 도구를 제공하는 PyTraceToIX를 확인하세요.

복잡하고 지저분한 디버깅에 작별을 고하세요. JsTraceToIX를 사용하면 입력을 캡처하고 결과를 한 번에 모두 표시할 수 있어 디버깅이 더 깔끔하고 빨라집니다!

JsTraceToIX를 확인하고 디버깅 프로세스를 어떻게 단순화할 수 있는지 알아보세요.

설치

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

npm install jstracetoix --save-dev

로그인 후 복사

반응 사용법

이 예에서는:

cityTax 화살표 기능은 입력 가격을 캡처하고 이름을 'Price'로 지정합니다.
쇼핑목록 기능:
- c__는 첫 번째 에서 제목을 캡처합니다.
- c__는 cityTax의 출력을 캡처하고 두 번째 에서 CityTax로 이름을 지정합니다.
- d__는 제목, 가격, 도시세, 총 가격 등 집계된 정보를 한 줄에 표시합니다.

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

를 사용하여 재정의할 수 있습니다.