Debugging with Truffle and Ethereum Remix in Tontine DApp Game
Tags: blockchain, ethereum, solidity, truffle
Published: 2019-07-12 18:40:34

<p>Ethereum is a general-purpose blockchain that is  more suited to describing business logic, through advanced scripts, also known  as smart contracts. Ethereum was designed with a broader vision, as a  decentralized or world computer that attempts to marry the power of the  blockchain, as a trust machine, with a Turing-complete contract engine.  Although Ethereum borrows many ideas that were initially introduced by bitcoin,  there are many divergences between the two.<br>
  The Ethereum virtual machine and smart contracts  are key elements of Ethereum, and constitute its main attraction. In Ethereum,  smart contracts represent a piece of code written in a high-level language  (Solidity, LLL, Viper) and stored as bytecode in the blockchain, in order to  run reliably in a stack-based virtual machine (Ethereum Virtual Machine), in  each node, once invoked. The interactions with smart contract functions happen  through transactions on the blockchain network, with their payloads being  executed in the Ethereum virtual machine, and the shared blockchain state being  updated accordingly.<br>
  <br>
  For those who are not familiar with blockchain technology reading <a href="https://myhsts.org/tutorial-history-and-evolution-of-blockchain-technology-from-bitcoin.php">History  and Evolution of Blockchain Technology from Bitcoin</a> article is strongly recommended. Also,  if you wish to learn and practice Hyperledger blockchain development, visit <a href="https://myhsts.org/tutorial-comprehensive-blockchain-hyperledger-developer-guide-for-all-professional-programmers.php">Comprehensive  Hyperledger Training Tutorials</a> page to get the outline of our  Hyperledger tutorial articles. <br>
  We  have written two sets of tutorials to explore Ethereum and Solidity programming  in depth. First set covered the following nine recipes:</p>
<ul>
  <li><a href="https://myhsts.org/tutorial-learn-about-ethereum-blockchain-development-with-dapps-and-ethereum-vm.php">Introduction to Ethereum Blockchain  Development with DApps and Ethereum VM</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-build-auction-dapp-with-ethereum-and-solidity-programming-language.php">Building Auction DApp With Ethereum and  Solidity Programming Language</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-work-with-ethereum-blockchain-applications-through-remix-ide.php">Working with Ethereum Blockchain  Applications through Remix IDE</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-build-bidding-form-in-web3js-for-ethereum-auction-dapp.php">Building Bidding Form in Web3js for  Ethereum Auction DApp</a></li>
  <li><a href="https://developer.ibm.com/recipes/tutorials/working-with-web3js-api-and-json-to-build-ethereum-blockchain-applications/">Working with web3js API and JSON to  Build Ethereum Blockchain Applications</a></li>
  <li><a href="https://dev.to/weg2g/deployment-environments-for-managing-ethereum-smart-contracts-16ha" target="_blank">Deployment  Environments for Managing Ethereum Smart Contracts</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-work-with-ethereum-private-network-with-golang-with-geth.php">Work with Ethereum Private Network with  Golang with Geth</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-compile-and-deploy-ethereum-contracts-using-solidity-compiler.php">Compiling and Deploying Ethereum  Contracts Using Solidity Compiler</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-run-ethereum-auction-dapp-with-some-solidity-tips.php">Running Ethereum Auction DApp and  Solidity Tips</a></li>
</ul>
<p>In  short, you learned about how to set up and configure Ethereum and develop  blockchain applications using Solidity programming language. We explored its  key components, including smart contracts and Web3.JS API via an Auction  Decentralized Application (DApp) step-by-step. <br>
  In  second set, we discuss more advance topics in Ethereum blockchain development  and solidity while building a Tontine DApp game step-by-step. Specifically, we  cover Truffle and Drizzle. For instance, we show you how a tool such as Truffle  can be an assistant in building, testing, debugging, and deploying DApps. In  summary, we are going to cover four main topics: </p>
<ul>
  <li>Exploring the Truffle suite</li>
  <li>Learning Solidity's advanced features</li>
  <li>Contract testing and debugging </li>
  <li>Building a user interface using Drizzle</li>
</ul>
<p>The 2nd  set consists of 8 recipes as follows:</p>
<ul>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-install-truffle-and-setup-ganache-for-compiling-ethereum-smart-contracts-for-tontine-dapp-game.php">Install Truffle and Setup Ganache for  Compiling Ethereum Smart Contracts for Tontine DApp Game</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-run-tontine-ethereum-dapp-game-contract.php">Run  Tontine Ethereum DApp Game Contract</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-design-tontine-ethereum-dapp-game-interfaces.php">Design Tontine Ethereum DApp Game  Interfaces</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-about-blockchain-contract-interactions-between-ethereum-and-solidity-via-tontine-dapp-game.php">Contract Interactions between Ethereum  and Solidity via Tontine DApp Game</a></li>
  <li><a href="https://developer.ibm.com/recipes/tutorials/work-with-ethereum-solidity-and-truffle-unit-testing-in-tontine-dapp-game/">Work with Truffle Unit Testing in  Tontine DApp Game</a></li>
  <li>Debugging  with Truffle and Ethereum Remix in Tontine DApp Game</li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-build-frontend-blockchain-application-for-Ethereum-dapp-game-with-drizzle.php">Building Frontend Application for  Tontine DApp Game with Drizzle</a></li>
  <li><a href="https://myhsts.org/tutorial-learn-how-to-run-and-play-tontine-ethereum-dapp-game.php">Running and Playing Tontine Ethereum  DApp Game</a></li>
<li></li>
</ul>
<p><strong><em><u>IMPORTANT: Understanding and completing the first set of recipes are  required prior to working on second set of recipes. </u></em></strong> <br>
  In our first round of recipes, we learned a lot  about the Ethereum ecosystem, but we are yet to realize the full potential of  its different components. More precisely, we explored how Ethereum works, what  a <strong>decentralized application </strong>(<strong>DApp</strong>) is and how to build one, and also covered  the key concepts of Solidity  and web3.js. We then introduced some of the most  common smart contract design patterns (withdrawal from a contract, restricting  access, state machines), before ending  with a discussion of a contract&rsquo;s cost optimization.<br>
To brush up your knowledge and skills, on second  round of recipes, we are going to build a Tontine DApp game. We will exploit  this example to explore new tools that are going to change the way you build DApps, and introduce  new Solidity features. </p>
<p>In this walkthrough, we will discover how a tool such as Truffle can aid in building, testing, debugging, and deploying our  DApp. </p>
<p>Developers familiar with debugging will find this a welcome relief. Truffle  and Remix provide built-in debugging features to help us understand where the  code fails. This section provides a general overview of debugging in Truffle  and Remix. If you are familiar with debugging using other IDEs, such as Eclipse  or NetBeans, you will find Truffle and  Remix similarly useful, even though they're less powerful.</p>
<p>&nbsp;</p>
<h4>Debugging with Truffle</h4>
<p>Truffle includes a built-in debugger to debug  transactions made against your contracts. It supports elementary debugging  operations, such as code-stepping (over, into, out, next, and instruction),  breakpoints, and watching expressions. </p>
<p>To try the debugging  features, let's intentionally introduce a bug into the Ctontine  contract and redeploy it into Ganache.  Afterward, we will run the tests and use Truffle&rsquo;s debugger to detect the source  of the error.<br>
  First, in the Ctontine contract code, change the first require() statement in  the join() <br>
  method as follows:</p>
<p>require(!Tplayer.exist(msg.sender));</p>
<p>As you can see, we reversed the required condition  by adding an exclamation mark, &quot;!&quot;,  indicating that the player shouldn&rsquo;t be registered in the Cplayer contract. This goes against our previous test's logic as we  add the testing player before calling each unit test, including a test for the join() method.<br>
  Now, if you run the truffle test test/test.js --network my_ganache tests, you will see the  following error: <br>
  <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-1.gif" alt="Ethereum blockchian debugging with Truffle" width="570" height="352"><br clear="ALL">
</p>
<br clear="all">

  <p>The output shows that we have a serious problem with the Ctontine tests and the VM exception while  processing transaction error message  isn&rsquo;t much help in detecting the cause behind it. Let&rsquo;s chase the  bug. </p>
  <h5>Spotting the error</h5>
  <p>To debug the previous error, copy the transaction ID from ganache-cli:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-2.gif" alt="Ethereum blockchian debugging with Truffle" width="506" height="227"><br clear="ALL">
  </p>
  <p>Then feed it as an argument to the truffle debug &lt;tx id&gt; --network my_ganache <br>
    debug command.</p>
  <p>In this case, we run:</p>
  <p><strong>truffle  debug 0x90e02cc211733cade22bd5ff3b1ea1600781b48a1c792d867cda83190f773319 --  network my_ganache</strong></p>

  <p>Once executed, you&rsquo;ll enter Truffle's debugging  mode, as shown the following screenshot:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-3.gif" alt="Ethereum blockchian debugging with Truffle" width="474" height="412"><br clear="ALL">
</p>
  <p>Keep pressing the <em>Enter </em>button to step through the code and trace the execution  steps. Finally, the debugger will stop with an error message:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-4.gif" alt="Ethereum blockchian debugging with Truffle" width="508" height="145"><br clear="ALL">
  </p>


  <p>As a result,  Truffle's debugger indicates that the exception (error) is raised due to a  failed require() statement,  as the evaluated expression (!Tplayer.exist(msg.sender)) will definitively always  be false. This is because,  if you remember, in the join()  test we added the player  first, therefore the exist() function will be always true, and hence our faulty require() will fail. The important point is that Truffle indicates  to us where the code fails with an interesting message,  instead of the previous error message generated by the VM.</p>
  <h5>Breakpoints and  watching values</h5>
  <p>More importantly, Truffle&rsquo;s debugger  console enables you to toggle a breakpoint by pressing b and then pressing c to debug until reaching the breakpoint.  Additionally, you can choose a variable (state  or local) to watch using +:variable_name or by pressing v at  any debugging step.<br>
    For example, if we debug the transaction initiated by the first (successful) Cplayer test (the addPlayer() test),  we can visualize the values of each variable using the v option, as follows:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-5.gif" alt="Ethereum blockchian debugging with Truffle" width="570" height="200"><br clear="ALL">
  </p>

  <p>Make sure to  experiment with all the debugger features introduced earlier. A good start  point would be to read Truffle&rsquo;s documentation.<br>
  Now, roll back the changes, and save the contract  to try debugging with Remix.</p>
  <p>&nbsp;</p>
  <h4>Debugging with Remix</h4>
  <p>If you&rsquo;re not a fan of CLI tools, Remix is a good debugging alternative for you. In fact, Remix provides a graphical interface  with many more options.<br>
    Start and connect Remix to Ganache as we did in the  previous recipes. Once connected, you will be able to debug the previous  transaction we debugged using Truffle. First of all, we need to activate the  debugging mode. There are several ways to achieve that, the easiest way being  to browse to the debugger tab in the right-hand panel, and then provide either  a transaction hash (transaction index) or a block number in the debugging  input:</p>
  <p><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-6.gif" alt="Ethereum blockchian debugging with Truffle" width="432" height="89"><br clear="ALL">
  </p>
  <p>In Remix's right-hand pane, on the debugging form  with several controls, press the play button to start debugging. You&rsquo;ll get a  debugging menu with the views depicted here:</p>


  <p><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-7.gif" alt="Ethereum blockchian debugging with Truffle" width="505" height="527"></p>
  <p>The views are listed as follows:</p>
  <ul>
    <ul>
      <ul>
        <ul>
          <li><strong>Instructions</strong>: Lists  the executed opcodes </li>
          <li><strong>Solidity </strong>L<strong>ocals</strong>: Shows the content of  local variables in the current scope</li>
          <li><strong>Solidity State</strong>: Displays state variables of the current executing contract</li>
          <li><strong>Step detail</strong>: Displays the current step's execution details (remaining gas and VM  trace step)</li>
 
          <li><strong>Stack</strong>:  Displays the local variables values stored in the stack</li>
          <li><strong>Storage</strong>:  Displays the contract storage entries(key, value) as shown here:</li>
        </ul>
      </ul>
    </ul>
  </ul>
  <p><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-8.gif" alt="Ethereum blockchian debugging with Truffle" width="466" height="79"><br clear="ALL">
  </p>
  <ul>
    <li><strong>Memory</strong>:  Provides a view into the memory space that is used by the contract </li>
    <li><strong>Call Data</strong>: Usually contains a 4-byte method signature followed by serialized arguments</li>
  </ul>
  <p>The slider bar at the top (transaction  section) helps you advance or roll back the execution of the transaction  (debugging) easily to visualize the evolution of the available debugging  information.</p>
  <p>Below the slider, Remix provides a set of buttons  at the top of the toolbar for controlling the execution of the transaction you  are debugging:</p>
  <ul>
    <li><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-9.jpg" alt="Ethereum blockchian debugging with Truffle" width="24" height="8"><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-10.jpg" alt="Ethereum blockchian debugging with Truffle" width="27" height="10"><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-11.jpg" alt="Ethereum blockchian debugging with Truffle" width="26" height="10"><strong>Step through a transaction's payload execution using the debugging  buttons</strong>: Single over back <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-12.jpg" alt="Ethereum blockchian debugging with Truffle" width="29" height="11" border="0">, step back    , step into    ,  and step over </li>
    <li><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-13.jpg" alt="Ethereum blockchian debugging with Truffle" width="19" height="7"><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-14.jpg" alt="Ethereum blockchian debugging with Truffle" width="22" height="8">You can stop debugging and resume operations at any time using the respective debugging buttons:                                   and </li>
  </ul>
  <p>&nbsp;</p>
<p>Debugging the previous faulty transaction using the  transaction&rsquo;s ID with Remix debugger boils down to dealing with crude information,  including the list of executed opcodes. In this first case, the debugger shows  us that the execution ends with a REVERT instruction:</p>

  <p><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-15.gif" alt="Ethereum blockchian debugging with Truffle" width="375" height="404"></p>
  <p>If you follow the JUMP instructions  and the values being loaded into the stack, you&rsquo;ll be able to trace the source  of the exception. However, I highly suspect you can't (or don't want to) deal  with this hard task, which is why we are proposing an easier alternative in the  remainder of this section.</p>
  <h5>Attaching the debugger  to the code</h5>
  <p>Using Remix&rsquo;s debugger with only the transaction ID can be a  little troublesome for beginners trying to spot where the code breaks, without  having the debugger attached to the code. To make the attachment, we need to  load the contract code and connect Remix to the new instance you&rsquo;ve migrated in  Ganache.</p>

  <p>First, import the contract file from Truffle&rsquo;s folder, as  follows:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-16.gif" alt="Ethereum blockchian debugging with Truffle" width="334" height="95"><br clear="ALL">
  </p>
  <p>Deploy the  contract into Ganache  using truffle migrate –reset –network my_ganache, then retrieve the contract's address: <br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-17.gif" alt="Ethereum blockchian debugging with Truffle" width="454" height="82"><br clear="ALL">
  </p>
  <p>Under the <strong>Run </strong>tab, connect Remix to the deployed Ctontine contract using the <strong>At Address </strong>button (not <strong>Deploy</strong>).  We then do the same for Cplayer. You&rsquo;ll end up with  two contracts loaded into Remix.</p>
  <p>Then,  we add three fictional players  using addPlayer(). To add different players,  change the account indicated in the transaction parameters in the top of  the right-hand panel each time and execute  the addPlayer() function (by pressing the addPlayer() button):<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-18.gif" alt="Ethereum blockchian debugging with Truffle" width="348" height="84"><br clear="ALL">
  </p>
  <p>Now that we have three registered players, we can start interacting with  the Ctontine <br>
    contract.</p>
  <h5>Watching values</h5>
<p>Remix provides us with a watch window to observe  and inspect contract variables. To use this feature, in the right panel, second  tab from the left, fill in the <strong>Value </strong>input  with 1 and <strong>ether</strong>:</p>

  <p><img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-19.gif" alt="Ethereum blockchian debugging with Truffle" width="309" height="54"></p>
  <p>Then make the first player join the Tontine game by  pressing the join button. When it completes successfully, change the account  and call the join method with zero ether, and you&rsquo;ll get the following error in  the messages output:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-20.gif" alt="Ethereum blockchian debugging with Truffle" width="570" height="81"><br clear="ALL">
</p>
  <p>Have you  noticed the <strong>send higher pension </strong>message  in the output console? If you remember, this message was defined in the require  function to show us the reason behind the exception: require(msg.value &gt;= 1 ether &amp;&amp; Tpension[msg.sender] == 0, &quot;send higher pension&quot;);. <br>
    Press the <strong>Debug </strong>button in the console or go to  the <strong>Debugger configuration </strong>tab to go  through the steps! <br>
    The <strong>Solidity  State </strong>section will show us that, unlike the first player, the second player  wasn&rsquo;t added successfully, as depicted in the following diagram:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-21.gif" alt="Ethereum blockchian debugging with Truffle" width="498" height="251"><br clear="ALL">
  </p>

  <p>In addition, when the  debugging panel loads up, you will see a blue highlight that marks the part of  the code being executed as the debugging progresses, which provides precious  assistance.</p>
  <p>Notice the existence of a warning  button under the debugging buttons.  Once pressed, it will  rethrow the exception and jump  directly to the last opcode  before the exception happened:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-22.gif" alt="Ethereum blockchian debugging with Truffle" width="530" height="122"><br clear="ALL">
  </p>
  <h5>Setting breakpoints</h5>
  <p>As you know, breakpoints are the most basic and  essential feature of reliable debugging. They represent a handy tool to help  you examine in detail the execution of a specific section of code. As in other  popular IDEs, in Remix breakpoints can be added and removed by clicking on the  left margin of a line of code:<br>
    <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-23.gif" alt="Ethereum blockchian debugging with Truffle" width="402" height="206"><br clear="ALL">
  </p>

<br clear="all">
<p>For example, let&rsquo;s define two  debugging breakpoints. Set the first at the line where the player is added to  the active players array, and the second at the line where the current  timestamp is recorded.<br>
  Now, make the  second player join the game properly with one ether, then debug the  transaction. Once the debugger starts, you can jump directly to your fixed  breakpoints using the <strong>Jump to previous breakpoint</strong>, <strong>Jump to next breakpoint</strong>, or <strong>Jump out debugger </strong>buttons: <br>
  <img src="https://coding-bootcamps.com/img/external/16/debugging-with-truffle-and-ethereum-remix-24.gif" alt="Ethereum blockchian debugging with Truffle" width="506" height="117"><br clear="ALL">
</p>
<p>At the breakpoint, Remix's debugger suspends your  running code so you can take a look at the values of contract's states and  explore the memory or storage at the current execution level.</p>
<p>For the sake of brevity, breakpoints will be the  last debugging feature we cover. You can refer to Remix's documentation  (https://remix.readthedocs.io/en/latest/tutorial_debug.html) for more information  about the debugger's advanced features.</p>
<p>This has been a long discussion on writing,  testing, and debugging our contracts. With that in place, we can safely shift to the frontend and start building the UI  components in our next recipe. </p>
<p>This recipe is written in  collaboration with Brian Wu who is a senior blockchain instructor at <a href="https://coding-bootcamps.com/">Coding Bootcamps</a> school in Washington  DC.</p>