debug_trace_test

by soos3d

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>
         Debug and Trace playground
      </title>
      <meta name="description" content="Debug and trace playground to compare the two modules on nodes running the Erigon and Geth clients" />
      <meta name="keywords" content="web3, ethereum, evm, client, erigon, go ethereum, debug, trace, transaction, geth" />
      <meta name="author" content="" />
      <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css'>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <header>
         <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
            <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
               <a href="https://chainstack.com" class="flex items-center mb-4 mt-4">
               <img src="https://chainstack.com/wp-content/uploads/2019/03/Logo-Blue@3x-Padded.png" class="mr-3 h-6 sm:h-9" alt="Chainstack-logo" />
               </a>
               <div class="flex items-center lg:order-2">
                  <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
                     <span class="sr-only">Open main menu</span>
                     <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3...

JavaScript

// call the trace_transaction method using the node and hash from the input
async function trace() {

    //retrieve the users inputs 
    const node_url = document.getElementById("erigon").value;
    const txHash = document.getElementById("hash").value;

    // connect to the node and log getBlockNumber to verify the connection is successful
    const provider = new ethers.providers.JsonRpcProvider(node_url);
    const blockNum = await provider.getBlockNumber();
    console.log(`The latest block is: ${blockNum}`);
    console.log('Tracing...')

    // update info label
    document.getElementById("info").innerHTML = "Tracing..."

    // call and measure the excecution time of the callTrace function
    const start = Date.now();
    const traceResult = await callTrace(txHash, provider);
    const end = Date.now();
    document.getElementById("SpeedEri").innerHTML = `${end - start} ms`

    //console.log(traceTx);
    console.log('done')

    // Display the JSON response. 
    const jsonResponse = JSON.stringify(traceResult, null, 4)
    document.getElementById("result").innerHTML = jsonResponse

    // update info label
    document.getElementById("info").innerHTML = "Done retrieving"

    // calculate the aproximate size of the object, trace is usually small and getSizeKb returns a value in kB
    const size = getSizeKb(traceResult)
    //const megaBytes = size / 1024;
    document.getElementById("dataEri").innerHTML = `${size} kB`

    // call getLines to count how many lines are present in the JSON
    const lines = getLines(traceResult)
    document.getElementById("linesEri").innerHTML = lines
}

// call the debug_traceTransaction method using the Erigon URL and hash from the input
async function debugErigon() {

    //retrieve the users inputs 
    const node_url = document.getElementById("erigon").value;
    const txHash = document.getElementById("hash").value;

    // connect to the node and log getBlockNumber to verify the connection is successful
   ...