如果您曾經(jīng)在 Node 或 Web 瀏覽器上調(diào)試 React 或 Vue 組件、箭頭函數(shù)或復(fù)雜表達(dá)式，您就會知道添加多個(gè) console.log 語句和進(jìn)行不必要的代碼更改。這就是 JsTraceToIX 發(fā)揮作用的地方！

項(xiàng)目鏈接

主要特點(diǎn)：

• 通過最少的代碼更改來簡化調(diào)試。
• 支持 React、Vue 和 Node.js 環(huán)境以及常規(guī)瀏覽器的調(diào)試。
• 輕松處理單行表達(dá)式和箭頭函數(shù)。
• 輕松定義名稱、過濾結(jié)果并覆蓋輸入和輸出以實(shí)現(xiàn)更好的可追溯性。
• 簡單的函數(shù)名稱，如 c__ 和 d__，可以在捕獲錯(cuò)誤后輕松發(fā)現(xiàn)并刪除痕跡。
• 與多線程環(huán)境無縫協(xié)作。

獎勵：如果您使用 Python，請查看 PyTraceToIX，它為您的 Python 項(xiàng)目提供了同樣強(qiáng)大的調(diào)試工具。

告別復(fù)雜、凌亂的調(diào)試——使用 JsTraceToIX，您可以一步捕獲輸入并顯示結(jié)果，讓調(diào)試更干凈、更快！

查看 JsTraceToIX 并了解它如何簡化您的調(diào)試過程。

安裝

npm install jstracetoix --save-dev

反應(yīng)用法

在此示例中：

• cityTax 箭頭函數(shù)捕獲輸入價(jià)格并將其命名為“Price”。
• 關(guān)于 ShoppingList 功能：
  • c__ 捕獲第一個(gè) 中的標(biāo)題。
  • c__ 捕獲 cityTax 的輸出，并在第二個(gè) 中將其命名為 CityTax。
  • d__ 在一行中顯示聚合信息：標(biāo)題、價(jià)格、城市稅、總價(jià)。

  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() - 當(dāng) value > 時(shí)覆蓋正在調(diào)試的輸入值40:00, 對于其他值，它不會捕獲輸入。
  • d__.allow() - 覆蓋正在調(diào)試的結(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;
  }
  

  輸出

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

  除 Node.js 環(huán)境外，輸出顯示在瀏覽器開發(fā)者工具的“控制臺選項(xiàng)卡”下。
  由于輸出是使用 console.debug 生成的，因此可以輕松地從常規(guī) console.log 消息中過濾掉它。
  
  可以使用 init__({'stream': new_stream.log })

  覆蓋默認(rèn)輸出函數(shù)

  元數(shù)據(jù)

  d__ 函數(shù)回調(diào)允許，before 和 after 將接收一個(gè)參數(shù)數(shù)據(jù)，其中包含允許的輸入以及以下元項(xiàng)：

  • meta__：元鍵列表，包括名稱鍵。
  • thread_id__: 正在執(zhí)行的thread_id
  • allow_input_count__: 允許輸入的總數(shù)。
  • input_count__：捕獲的輸入總數(shù)。
  • allow__：如果為 false，則允許。在回調(diào)后使用它。
  • output__：傳遞給之前的文本，不帶 new_line。
  • 名稱：名稱參數(shù)

  文檔

  軟件包文檔

以上是JsTraceToIX - 調(diào)試 React、Vue 和 Node.js 變得更容易！ – 無需用'console.log”弄亂您的代碼庫！的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！