JsTraceToIX - React, Vue 및 Node.js 디버깅이 더욱 쉬워졌습니다! – `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 })

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

메타데이터

d__ 함수 콜백을 사용하면 이전과 이후에 허용된 입력과 다음 메타 항목이 포함된 매개변수 데이터를 수신할 수 있습니다.

• Meta__: 이름 키를 포함한 메타 키 목록입니다.
• thread_id__: 실행 중인 thread_id
• allow_input_count__: 허용되는 총 입력 수.
• input_count__: 캡처되는 총 입력 수.
• 허용__: false인 경우 허용되었습니다. 콜백 이후에 사용하세요.
• 출력__: new_line 없이 이전에 전달된 텍스트입니다.
• name: 이름 매개변수

선적 서류 비치

패키지 문서

위 내용은 JsTraceToIX - React, Vue 및 Node.js 디버깅이 더욱 쉬워졌습니다! – `console.log`로 코드베이스를 복잡하게 만들 필요가 없습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!