Commit 93ddc084 authored by Rob Stupay's avatar Rob Stupay

update docs and remove old images

parent 478b411c
...@@ -3,10 +3,10 @@ Remix-IDE Layout ...@@ -3,10 +3,10 @@ Remix-IDE Layout
The new structure The new structure
-------------------- --------------------
![](images/a-layout1b.png) ![](images/a-layout1c.png)
1. Icon Panel - click to change which plugin appears in the Swap Panel 1. Icon Panel - click to change which plugin appears in the Side Panel
2. Swap Panel - Most but not all plugins will have their GUI here. 2. Side Panel - Most but not all plugins will have their GUI here.
3. Main Panel - In the old layout this was just for editing files. In the tabs can be plugins or files for the IDE to compile. 3. Main Panel - In the old layout this was just for editing files. In the tabs can be plugins or files for the IDE to compile.
4. Terminal - where you will see the results of your interactions with the GUI's. Also you can run scripts here. 4. Terminal - where you will see the results of your interactions with the GUI's. Also you can run scripts here.
......
...@@ -10,14 +10,17 @@ The code of `remixd` is ...@@ -10,14 +10,17 @@ The code of `remixd` is
`remixd` can be globally installed using the following command: `remixd` can be globally installed using the following command:
`npm install -g remixd` `npm install -g remixd`
You can install it just in the directory of your choice using this command: Or just install it in the directory of your choice by removing the -g flag:
`npm install remixd` `npm install remixd`
Then `remixd -s <absolute-path-to-the-shared-folder> --remix-ide <your-remix-ide-URL-instance>` will start `remixd` and will share the given folder. Then from the terminal, the command `remixd -s <absolute-path-to-the-shared-folder> --remix-ide <your-remix-ide-URL-instance>` will start `remixd` and will share the given folder with remix-ide.
For example, to sync your local folder to the official Remix IDE, For example, to use remixd with Remix IDE ( and not the alpha version) use this command:
`remixd -s <absolute-path-to-the-shared-folder> --remix-ide https://remix.ethereum.org` `remixd -s <absolute-path-to-the-shared-folder> --remix-ide https://remix.ethereum.org`
Make sure that if you use https://remix.ethereum.org (secure http) in the remixd command (like in the example above), that you are also pointing your browser to https://remix.ethereum.org and not to http://remix.ethereum.org (plain old insecure http). Or if you want to use http in the browser use http in the remixd command.
The folder is shared using a websocket connection between `Remix IDE` The folder is shared using a websocket connection between `Remix IDE`
and `remixd`. and `remixd`.
......
...@@ -2,19 +2,17 @@ Debugging transactions ...@@ -2,19 +2,17 @@ Debugging transactions
====================== ======================
There are two ways to start debugging, each one corresponds to a different use case. There are two ways to start debugging, each one corresponds to a different use case.
* from the transaction log in the Terminal - use this when you are want to debug a "sucessful" transaction. * from the transaction log in the Terminal - use this when you want to debug a transaction.
* from the Debugger - use this if you have a *transaction hash* or a *block number* with a *transaction index*. * from the Debugger - use this if you have a *transaction hash*.
### Debug from the Transaction GUI - ### Initiate Debugging from the transaction log in the Terminal
Let's start with a basic contract ( or replace this one by your own ) :
Let's start with a basic contract (or replace this one by your own):
- create a blank file in the file explorer (by clicking the + icon) and give it a name. - create a blank file in the file explorer (by clicking the + icon) and give it a name.
- copy the code below. - copy the code below.
- compile the code. - compile the code.
- click the Run & Deploy icon in the icon panel. - click the Run & Deploy icon in the icon panel.
``` ```
{.sourceCode .none} - RS why is this here?
pragma solidity >=0.5.1 <0.6.0; pragma solidity >=0.5.1 <0.6.0;
contract Donation { contract Donation {
address owner; address owner;
...@@ -90,51 +88,49 @@ Click the debug button to start debugging it. ...@@ -90,51 +88,49 @@ Click the debug button to start debugging it.
![](images/a-debug5-term-debug-but.png) ![](images/a-debug5-term-debug-but.png)
### From the Debugger Before we get to the actual debugging tool, the next section show how to start debugging session directly from the Debugger.
### Initiate Debugging from the from the Debugger
Click the bug icon in the icon panel to get to the debugger in the side panel.
Click the bug icon in the icon panel to get to the debugger in the side panel. If you don't see the bug icon go to the plugin manager and activate the debugger. If you don't see the bug icon, go to the plugin manager and activate the debugger.
You can start a debug session by providing either a `transaction hash` You can start a debug session by providing a `transaction hash`.
or a `block number` and `transaction index`.
To find a transaction hash To find a transaction hash:
1. go to a transaction in the terminal. 1. Go to a transaction in the terminal.
2. Click a line with a transaction - to exand the log. 2. Click a line with a transaction - to exand the log.
3. Copy the transaction has locate there. 3. The transaction hash is there - copy it.
![image](remix3.png) ![](images/a-debug6-term-txn-hash.png)
Then click on the `start debugging` button. Then click in the debugger paste the hash and click on the `Start debugging` button.
![](images/a-debug7-debugger.png)
Using the debugger Using the debugger
------------------ ------------------
![](images/a-debug8-top3.png)
The debugger allows one to see detailed informations about the The debugger allows one to see detailed informations about the
transaction's execution. It uses the editor to display the transaction's execution. It uses the editor to display the
location in the source code where the current execution is. location in the source code where the current execution is.
The transaction panel displays basic information about the current
transaction.
![image](remix_debugtransactioninfo.png)
The navigation part contains a slider and buttons that can be used to The navigation part contains a slider and buttons that can be used to
step through the transaction execution. step through the transaction execution.
From the left to the right:
step over back, step into back, step into forward, step over forward, ### More explaination of what these buttons do.
jump out (jump out of the current call), jump to the previous 1. Step Into
breakpoint, jump to the next breakpoint. 2. Step Over Into
![image](remix_navigation.png)
11 panels give detailed information about the execution: 11 panels give detailed information about the execution:
### Instructions ### Instructions
![image](remix_debuginstructions.png)
The Instructions panel displays the bytecode of the current executing The Instructions panel displays the bytecode of the current executing
contract- with the current step highlighted. contract- with the current step highlighted.
...@@ -146,15 +142,11 @@ those that refers to the same expression. ...@@ -146,15 +142,11 @@ those that refers to the same expression.
### Solidity Locals ### Solidity Locals
![image](remix_soliditylocals.png)
The Solidity Locals panel displays local variables associated with the The Solidity Locals panel displays local variables associated with the
current context. current context.
### Solidity State ### Solidity State
![image](remix_soliditystate.png)
The Solidity State panel displays state variables of the current The Solidity State panel displays state variables of the current
executing contract. executing contract.
...@@ -173,7 +165,7 @@ These panels display low level informations about the execution: ...@@ -173,7 +165,7 @@ These panels display low level informations about the execution:
### Reverted Transaction ### Reverted Transaction
A transaction could be `reverted` (because of an *out of gas exception* or A transaction can be `reverted` (because of an *out of gas exception* or
Solidity `revert` statement or because of a low level exception). Solidity `revert` statement or because of a low level exception).
It is important to be aware of the exception and to locate It is important to be aware of the exception and to locate
...@@ -183,8 +175,6 @@ Remix will warn you when the execution throws an exception. The ...@@ -183,8 +175,6 @@ Remix will warn you when the execution throws an exception. The
`warning` button will jump to the last opcode before the exception `warning` button will jump to the last opcode before the exception
happened. happened.
![image](remix_executionexception.png)
### Breakpoints ### Breakpoints
The two last buttons from the navigation area are used to jump either The two last buttons from the navigation area are used to jump either
...@@ -192,8 +182,6 @@ back to the previous breakpoint or forward to the next breakpoint. ...@@ -192,8 +182,6 @@ back to the previous breakpoint or forward to the next breakpoint.
Breakpoints can be added and removed by clicking on the line number in the *Editor*. Breakpoints can be added and removed by clicking on the line number in the *Editor*.
![image](remix_breakpoint.png)
When using debug session with breakpoints, the execution will jump to the first When using debug session with breakpoints, the execution will jump to the first
encountered breakpoint. encountered breakpoint.
...@@ -202,9 +190,7 @@ variable, it might be triggered twice: Once for initializing the ...@@ -202,9 +190,7 @@ variable, it might be triggered twice: Once for initializing the
variable to zero and second time for assigning the actual value. As an variable to zero and second time for assigning the actual value. As an
example, assume you are debugging the following contract: example, assume you are debugging the following contract:
(RS - what is the {.sourceCode .none} doing?)
``` ```
{.sourceCode .none}
pragma solidity >=0.5.1 <0.6.0; pragma solidity >=0.5.1 <0.6.0;
contract ctr { contract ctr {
......
...@@ -29,23 +29,28 @@ For more information see more about [Solidity ...@@ -29,23 +29,28 @@ For more information see more about [Solidity
modifier](http://solidity.readthedocs.io/en/develop/miscellaneous.html?highlight=pure#modifiers) modifier](http://solidity.readthedocs.io/en/develop/miscellaneous.html?highlight=pure#modifiers)
. .
If a function requires input parameters, well, you have to put them in. If a function requires input parameters, well.. you gotta put them in.
## Inputting parameters ## Inputting parameters
![](images/a-udapp-inputs.png) ![](images/a-udapp-inputs.png)
The input box tells you what type each parameter needs to be. ### Inputting parameters in the collapsed view
Numbers and addresses do not need to be wrapped in double quotes. Strings need to be wrapped. (Inputting all the parameters in a single input box)
+ The input box tells you what type each parameter needs to be.
+ Numbers and addresses do not need to be wrapped in double quotes.
+ Strings need to be wrapped.
+ Parameters are separated by commas.
When using the input box for parameters in its "up" display, the parameters need to be separated by a comma. In the example above the "delegate" function has 3 parameters. In the example above the "delegate" function has 3 parameters.
Clicking the 'down' caret brings you to the *Multi-param Manager* - where you can input the parameters one at a time. ### Inputting parameters in the expanded view
Clicking the 'down' caret brings you to the *Multi-param Manager* - where you can input the parameters one at a time. **Much less confusing!**
![](images/a-udapp-multi-param-man.png) ![](images/a-udapp-multi-param-man.png)
In the *Multi-param Manager*, strings do not need to be wrapped. In the expanded view, strings do not need to be wrapped.
Clicking the clipboard icon will encode the inputs and will copy them. Only a valid set of inputs can be encoded. Clicking the clipboard icon will encode the inputs and will copy them. Only a valid set of inputs can be encoded.
......
...@@ -207,10 +207,10 @@ ...@@ -207,10 +207,10 @@
<h1>Remix-IDE Layout<a class="headerlink" href="#remix-ide-layout" title="Permalink to this headline"></a></h1> <h1>Remix-IDE Layout<a class="headerlink" href="#remix-ide-layout" title="Permalink to this headline"></a></h1>
<div class="section" id="the-new-structure"> <div class="section" id="the-new-structure">
<h2>The new structure<a class="headerlink" href="#the-new-structure" title="Permalink to this headline"></a></h2> <h2>The new structure<a class="headerlink" href="#the-new-structure" title="Permalink to this headline"></a></h2>
<p><img alt="_images/a-layout1b.png" src="_images/a-layout1b.png" /></p> <p><img alt="_images/a-layout1c.png" src="_images/a-layout1c.png" /></p>
<ol class="simple"> <ol class="simple">
<li><p>Icon Panel - click to change which plugin appears in the Swap Panel</p></li> <li><p>Icon Panel - click to change which plugin appears in the Side Panel</p></li>
<li><p>Swap Panel - Most but not all plugins will have their GUI here.</p></li> <li><p>Side Panel - Most but not all plugins will have their GUI here.</p></li>
<li><p>Main Panel - In the old layout this was just for editing files. In the tabs can be plugins or files for the IDE to compile.</p></li> <li><p>Main Panel - In the old layout this was just for editing files. In the tabs can be plugins or files for the IDE to compile.</p></li>
<li><p>Terminal - where you will see the results of your interactions with the GUI’s. Also you can run scripts here.</p></li> <li><p>Terminal - where you will see the results of your interactions with the GUI’s. Also you can run scripts here.</p></li>
</ol> </ol>
......
...@@ -201,11 +201,12 @@ application access to a folder on your local computer.</p> ...@@ -201,11 +201,12 @@ application access to a folder on your local computer.</p>
<a class="reference external" href="https://github.com/ethereum/remixd">here</a> .</p> <a class="reference external" href="https://github.com/ethereum/remixd">here</a> .</p>
<p><code class="docutils literal notranslate"><span class="pre">remixd</span></code> can be globally installed using the following command: <p><code class="docutils literal notranslate"><span class="pre">remixd</span></code> can be globally installed using the following command:
<code class="docutils literal notranslate"><span class="pre">npm</span> <span class="pre">install</span> <span class="pre">-g</span> <span class="pre">remixd</span></code></p> <code class="docutils literal notranslate"><span class="pre">npm</span> <span class="pre">install</span> <span class="pre">-g</span> <span class="pre">remixd</span></code></p>
<p>You can install it just in the directory of your choice using this command: <p>Or just install it in the directory of your choice by removing the -g flag:
<code class="docutils literal notranslate"><span class="pre">npm</span> <span class="pre">install</span> <span class="pre">remixd</span></code></p> <code class="docutils literal notranslate"><span class="pre">npm</span> <span class="pre">install</span> <span class="pre">remixd</span></code></p>
<p>Then <code class="docutils literal notranslate"><span class="pre">remixd</span> <span class="pre">-s</span> <span class="pre">&lt;absolute-path-to-the-shared-folder&gt;</span> <span class="pre">--remix-ide</span> <span class="pre">&lt;your-remix-ide-URL-instance&gt;</span></code> will start <code class="docutils literal notranslate"><span class="pre">remixd</span></code> and will share the given folder.</p> <p>Then from the terminal, the command <code class="docutils literal notranslate"><span class="pre">remixd</span> <span class="pre">-s</span> <span class="pre">&lt;absolute-path-to-the-shared-folder&gt;</span> <span class="pre">--remix-ide</span> <span class="pre">&lt;your-remix-ide-URL-instance&gt;</span></code> will start <code class="docutils literal notranslate"><span class="pre">remixd</span></code> and will share the given folder with remix-ide.</p>
<p>For example, to sync your local folder to the official Remix IDE, <p>For example, to use remixd with Remix IDE ( and not the alpha version) use this command:
<code class="docutils literal notranslate"><span class="pre">remixd</span> <span class="pre">-s</span> <span class="pre">&lt;absolute-path-to-the-shared-folder&gt;</span> <span class="pre">--remix-ide</span> <span class="pre">https://remix.ethereum.org</span></code></p> <code class="docutils literal notranslate"><span class="pre">remixd</span> <span class="pre">-s</span> <span class="pre">&lt;absolute-path-to-the-shared-folder&gt;</span> <span class="pre">--remix-ide</span> <span class="pre">https://remix.ethereum.org</span></code></p>
<p>Make sure that if you use https://remix.ethereum.org (secure http) in the remixd command (like in the example above), that you are also pointing your browser to https://remix.ethereum.org and not to http://remix.ethereum.org (plain old insecure http). Or if you want to use http in the browser use http in the remixd command.</p>
<p>The folder is shared using a websocket connection between <code class="docutils literal notranslate"><span class="pre">Remix</span> <span class="pre">IDE</span></code> <p>The folder is shared using a websocket connection between <code class="docutils literal notranslate"><span class="pre">Remix</span> <span class="pre">IDE</span></code>
and <code class="docutils literal notranslate"><span class="pre">remixd</span></code>.</p> and <code class="docutils literal notranslate"><span class="pre">remixd</span></code>.</p>
<p>Be sure the user executing <code class="docutils literal notranslate"><span class="pre">remixd</span></code> has read/write permission on the <p>Be sure the user executing <code class="docutils literal notranslate"><span class="pre">remixd</span></code> has read/write permission on the
......
This diff is collapsed.
This diff is collapsed.
...@@ -102,7 +102,11 @@ ...@@ -102,7 +102,11 @@
<li class="toctree-l1"><a class="reference internal" href="run.html">Run &amp; Deploy</a></li> <li class="toctree-l1"><a class="reference internal" href="run.html">Run &amp; Deploy</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">Run &amp; Deploy (part 2)</a><ul> <li class="toctree-l1 current"><a class="current reference internal" href="#">Run &amp; Deploy (part 2)</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#deployed-contracts">Deployed contracts</a></li> <li class="toctree-l2"><a class="reference internal" href="#deployed-contracts">Deployed contracts</a></li>
<li class="toctree-l2"><a class="reference internal" href="#inputting-parameters">Inputting parameters</a></li> <li class="toctree-l2"><a class="reference internal" href="#inputting-parameters">Inputting parameters</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#inputting-parameters-in-the-collapsed-view">Inputting parameters in the collapsed view</a></li>
<li class="toctree-l3"><a class="reference internal" href="#inputting-parameters-in-the-expanded-view">Inputting parameters in the expanded view</a></li>
</ul>
</li>
</ul> </ul>
</li> </li>
<li class="toctree-l1"><a class="reference internal" href="debugger.html">Debugger</a></li> <li class="toctree-l1"><a class="reference internal" href="debugger.html">Debugger</a></li>
...@@ -217,21 +221,32 @@ But this transaction does not accept Ether.</p></li> ...@@ -217,21 +221,32 @@ But this transaction does not accept Ether.</p></li>
<p>For more information see more about <a class="reference external" href="http://solidity.readthedocs.io/en/develop/miscellaneous.html?highlight=pure#modifiers">Solidity <p>For more information see more about <a class="reference external" href="http://solidity.readthedocs.io/en/develop/miscellaneous.html?highlight=pure#modifiers">Solidity
modifier</a> modifier</a>
.</p> .</p>
<p>If a function requires input parameters, well, you have to put them in.</p> <p>If a function requires input parameters, well.. you gotta put them in.</p>
</div> </div>
<div class="section" id="inputting-parameters"> <div class="section" id="inputting-parameters">
<h2>Inputting parameters<a class="headerlink" href="#inputting-parameters" title="Permalink to this headline"></a></h2> <h2>Inputting parameters<a class="headerlink" href="#inputting-parameters" title="Permalink to this headline"></a></h2>
<p><img alt="_images/a-udapp-inputs.png" src="_images/a-udapp-inputs.png" /></p> <p><img alt="_images/a-udapp-inputs.png" src="_images/a-udapp-inputs.png" /></p>
<p>The input box tells you what type each parameter needs to be.</p> <div class="section" id="inputting-parameters-in-the-collapsed-view">
<p>Numbers and addresses do not need to be wrapped in double quotes. Strings need to be wrapped.</p> <h3>Inputting parameters in the collapsed view<a class="headerlink" href="#inputting-parameters-in-the-collapsed-view" title="Permalink to this headline"></a></h3>
<p>When using the input box for parameters in its “up” display, the parameters need to be separated by a comma. In the example above the “delegate” function has 3 parameters.</p> <p>(Inputting all the parameters in a single input box)</p>
<p>Clicking the ‘down’ caret brings you to the <em>Multi-param Manager</em> - where you can input the parameters one at a time.</p> <ul class="simple">
<li><p>The input box tells you what type each parameter needs to be.</p></li>
<li><p>Numbers and addresses do not need to be wrapped in double quotes.</p></li>
<li><p>Strings need to be wrapped.</p></li>
<li><p>Parameters are separated by commas.</p></li>
</ul>
<p>In the example above the “delegate” function has 3 parameters.</p>
</div>
<div class="section" id="inputting-parameters-in-the-expanded-view">
<h3>Inputting parameters in the expanded view<a class="headerlink" href="#inputting-parameters-in-the-expanded-view" title="Permalink to this headline"></a></h3>
<p>Clicking the ‘down’ caret brings you to the <em>Multi-param Manager</em> - where you can input the parameters one at a time. <strong>Much less confusing!</strong></p>
<p><img alt="_images/a-udapp-multi-param-man.png" src="_images/a-udapp-multi-param-man.png" /></p> <p><img alt="_images/a-udapp-multi-param-man.png" src="_images/a-udapp-multi-param-man.png" /></p>
<p>In the <em>Multi-param Manager</em>, strings do not need to be wrapped.</p> <p>In the expanded view, strings do not need to be wrapped.</p>
<p>Clicking the clipboard icon will encode the inputs and will copy them. Only a valid set of inputs can be encoded.</p> <p>Clicking the clipboard icon will encode the inputs and will copy them. Only a valid set of inputs can be encoded.</p>
<p>So if you made a mistake and put a uint8 where an address should have been, clicking the clipboard here will give you an error.</p> <p>So if you made a mistake and put a uint8 where an address should have been, clicking the clipboard here will give you an error.</p>
</div> </div>
</div> </div>
</div>
</div> </div>
......
...@@ -3,10 +3,10 @@ Remix-IDE Layout ...@@ -3,10 +3,10 @@ Remix-IDE Layout
The new structure The new structure
-------------------- --------------------
![](images/a-layout1b.png) ![](images/a-layout1c.png)
1. Icon Panel - click to change which plugin appears in the Swap Panel 1. Icon Panel - click to change which plugin appears in the Side Panel
2. Swap Panel - Most but not all plugins will have their GUI here. 2. Side Panel - Most but not all plugins will have their GUI here.
3. Main Panel - In the old layout this was just for editing files. In the tabs can be plugins or files for the IDE to compile. 3. Main Panel - In the old layout this was just for editing files. In the tabs can be plugins or files for the IDE to compile.
4. Terminal - where you will see the results of your interactions with the GUI's. Also you can run scripts here. 4. Terminal - where you will see the results of your interactions with the GUI's. Also you can run scripts here.
......
Remix Plugin
============
The best documentation about how to build a plugin is currently in [the readme of remix-plugin repo](https://github.com/ethereum/remix-plugin). Please go [here](https://github.com/ethereum/remix-plugin) to learn all about it.
Remix Plugin API usage
======================
This section list all the available key and value pair which define this API:
## 1) notifications
### app (key: app)
- unfocus `[]`
- focus `[]`
### compiler (key: compiler)
- compilationFinished `[success (bool), data (obj), source (obj)]`
- compilationData `[compilationResult (obj)]`
### transaction listener (key: txlistener)
- newTransaction `[tx (obj)]`
### addendum
`newTransaction` is broadcasted to all loaded plugins.
`compilationFinished` is sent to the plugin that currently has the focus.
`focus / unfocus` is sent to the plugin which currently has the focus or is unfocused.
`compilationData` is sent always just upon the `focus` event and gives the last compilation result.
## 2) requests
### app
- getExecutionContextProvider `@return {String} provider (injected | web3 | vm)`
- getProviderEndpoint `@return {String} provider endpoint url if web3, returns an error if injected or javascript VM`
- updateTitle `@param {String} title`
### config
- setConfig `@param {String} path, @param {String} content`
- getConfig `@param {String} path`
- removeConfig `@param {String} path`
### compiler
- getCompilationResult `@return {Object} compilation result`
### udapp (only VM)
- runTx `@param {Object} tx`
- getAccounts `@return {Array} acccounts`
- createVMAccount `@param {String} privateKey, @param {String} balance (hex)`
### editor
- getCurrentFile `@return {String} current file path displayed in the editor`
- getFile `@param {String} path`
- setFile `@param {String} path, @param {String} content`
- highlight `@param {Object} lineColumnPos, @param {String} filePath, @param {String} hexColor`
...@@ -10,14 +10,17 @@ The code of `remixd` is ...@@ -10,14 +10,17 @@ The code of `remixd` is
`remixd` can be globally installed using the following command: `remixd` can be globally installed using the following command:
`npm install -g remixd` `npm install -g remixd`
You can install it just in the directory of your choice using this command: Or just install it in the directory of your choice by removing the -g flag:
`npm install remixd` `npm install remixd`
Then `remixd -s <absolute-path-to-the-shared-folder> --remix-ide <your-remix-ide-URL-instance>` will start `remixd` and will share the given folder. Then from the terminal, the command `remixd -s <absolute-path-to-the-shared-folder> --remix-ide <your-remix-ide-URL-instance>` will start `remixd` and will share the given folder with remix-ide.
For example, to sync your local folder to the official Remix IDE, For example, to use remixd with Remix IDE ( and not the alpha version) use this command:
`remixd -s <absolute-path-to-the-shared-folder> --remix-ide https://remix.ethereum.org` `remixd -s <absolute-path-to-the-shared-folder> --remix-ide https://remix.ethereum.org`
Make sure that if you use https://remix.ethereum.org (secure http) in the remixd command (like in the example above), that you are also pointing your browser to https://remix.ethereum.org and not to http://remix.ethereum.org (plain old insecure http). Or if you want to use http in the browser use http in the remixd command.
The folder is shared using a websocket connection between `Remix IDE` The folder is shared using a websocket connection between `Remix IDE`
and `remixd`. and `remixd`.
......
...@@ -2,19 +2,17 @@ Debugging transactions ...@@ -2,19 +2,17 @@ Debugging transactions
====================== ======================
There are two ways to start debugging, each one corresponds to a different use case. There are two ways to start debugging, each one corresponds to a different use case.
* from the transaction log in the Terminal - use this when you are want to debug a "sucessful" transaction. * from the transaction log in the Terminal - use this when you want to debug a transaction.
* from the Debugger - use this if you have a *transaction hash* or a *block number* with a *transaction index*. * from the Debugger - use this if you have a *transaction hash*.
### Debug from the Transaction GUI - ### Initiate Debugging from the transaction log in the Terminal
Let's start with a basic contract ( or replace this one by your own ) :
Let's start with a basic contract (or replace this one by your own):
- create a blank file in the file explorer (by clicking the + icon) and give it a name. - create a blank file in the file explorer (by clicking the + icon) and give it a name.
- copy the code below. - copy the code below.
- compile the code. - compile the code.
- click the Run & Deploy icon in the icon panel. - click the Run & Deploy icon in the icon panel.
``` ```
{.sourceCode .none} - RS why is this here?
pragma solidity >=0.5.1 <0.6.0; pragma solidity >=0.5.1 <0.6.0;
contract Donation { contract Donation {
address owner; address owner;
...@@ -90,51 +88,49 @@ Click the debug button to start debugging it. ...@@ -90,51 +88,49 @@ Click the debug button to start debugging it.
![](images/a-debug5-term-debug-but.png) ![](images/a-debug5-term-debug-but.png)
### From the Debugger Before we get to the actual debugging tool, the next section show how to start debugging session directly from the Debugger.
### Initiate Debugging from the from the Debugger
Click the bug icon in the icon panel to get to the debugger in the side panel.
Click the bug icon in the icon panel to get to the debugger in the side panel. If you don't see the bug icon go to the plugin manager and activate the debugger. If you don't see the bug icon, go to the plugin manager and activate the debugger.
You can start a debug session by providing either a `transaction hash` You can start a debug session by providing a `transaction hash`.
or a `block number` and `transaction index`.
To find a transaction hash To find a transaction hash:
1. go to a transaction in the terminal. 1. Go to a transaction in the terminal.
2. Click a line with a transaction - to exand the log. 2. Click a line with a transaction - to exand the log.
3. Copy the transaction has locate there. 3. The transaction hash is there - copy it.
![image](remix3.png) ![](images/a-debug6-term-txn-hash.png)
Then click on the `start debugging` button. Then click in the debugger paste the hash and click on the `Start debugging` button.
![](images/a-debug7-debugger.png)
Using the debugger Using the debugger
------------------ ------------------
![](images/a-debug8-top3.png)
The debugger allows one to see detailed informations about the The debugger allows one to see detailed informations about the
transaction's execution. It uses the editor to display the transaction's execution. It uses the editor to display the
location in the source code where the current execution is. location in the source code where the current execution is.
The transaction panel displays basic information about the current
transaction.
![image](remix_debugtransactioninfo.png)
The navigation part contains a slider and buttons that can be used to The navigation part contains a slider and buttons that can be used to
step through the transaction execution. step through the transaction execution.
From the left to the right:
step over back, step into back, step into forward, step over forward, ### More explaination of what these buttons do.
jump out (jump out of the current call), jump to the previous 1. Step Into
breakpoint, jump to the next breakpoint. 2. Step Over Into
![image](remix_navigation.png)
11 panels give detailed information about the execution: 11 panels give detailed information about the execution:
### Instructions ### Instructions
![image](remix_debuginstructions.png)
The Instructions panel displays the bytecode of the current executing The Instructions panel displays the bytecode of the current executing
contract- with the current step highlighted. contract- with the current step highlighted.
...@@ -146,15 +142,11 @@ those that refers to the same expression. ...@@ -146,15 +142,11 @@ those that refers to the same expression.
### Solidity Locals ### Solidity Locals
![image](remix_soliditylocals.png)
The Solidity Locals panel displays local variables associated with the The Solidity Locals panel displays local variables associated with the
current context. current context.
### Solidity State ### Solidity State
![image](remix_soliditystate.png)
The Solidity State panel displays state variables of the current The Solidity State panel displays state variables of the current
executing contract. executing contract.
...@@ -173,7 +165,7 @@ These panels display low level informations about the execution: ...@@ -173,7 +165,7 @@ These panels display low level informations about the execution:
### Reverted Transaction ### Reverted Transaction
A transaction could be `reverted` (because of an *out of gas exception* or A transaction can be `reverted` (because of an *out of gas exception* or
Solidity `revert` statement or because of a low level exception). Solidity `revert` statement or because of a low level exception).
It is important to be aware of the exception and to locate It is important to be aware of the exception and to locate
...@@ -183,8 +175,6 @@ Remix will warn you when the execution throws an exception. The ...@@ -183,8 +175,6 @@ Remix will warn you when the execution throws an exception. The
`warning` button will jump to the last opcode before the exception `warning` button will jump to the last opcode before the exception
happened. happened.
![image](remix_executionexception.png)
### Breakpoints ### Breakpoints
The two last buttons from the navigation area are used to jump either The two last buttons from the navigation area are used to jump either
...@@ -192,8 +182,6 @@ back to the previous breakpoint or forward to the next breakpoint. ...@@ -192,8 +182,6 @@ back to the previous breakpoint or forward to the next breakpoint.
Breakpoints can be added and removed by clicking on the line number in the *Editor*. Breakpoints can be added and removed by clicking on the line number in the *Editor*.
![image](remix_breakpoint.png)
When using debug session with breakpoints, the execution will jump to the first When using debug session with breakpoints, the execution will jump to the first
encountered breakpoint. encountered breakpoint.
...@@ -202,9 +190,7 @@ variable, it might be triggered twice: Once for initializing the ...@@ -202,9 +190,7 @@ variable, it might be triggered twice: Once for initializing the
variable to zero and second time for assigning the actual value. As an variable to zero and second time for assigning the actual value. As an
example, assume you are debugging the following contract: example, assume you are debugging the following contract:
(RS - what is the {.sourceCode .none} doing?)
``` ```
{.sourceCode .none}
pragma solidity >=0.5.1 <0.6.0; pragma solidity >=0.5.1 <0.6.0;
contract ctr { contract ctr {
......
...@@ -29,23 +29,28 @@ For more information see more about [Solidity ...@@ -29,23 +29,28 @@ For more information see more about [Solidity
modifier](http://solidity.readthedocs.io/en/develop/miscellaneous.html?highlight=pure#modifiers) modifier](http://solidity.readthedocs.io/en/develop/miscellaneous.html?highlight=pure#modifiers)
. .
If a function requires input parameters, well, you have to put them in. If a function requires input parameters, well.. you gotta put them in.
## Inputting parameters ## Inputting parameters
![](images/a-udapp-inputs.png) ![](images/a-udapp-inputs.png)
The input box tells you what type each parameter needs to be. ### Inputting parameters in the collapsed view
Numbers and addresses do not need to be wrapped in double quotes. Strings need to be wrapped. (Inputting all the parameters in a single input box)
+ The input box tells you what type each parameter needs to be.
+ Numbers and addresses do not need to be wrapped in double quotes.
+ Strings need to be wrapped.
+ Parameters are separated by commas.
When using the input box for parameters in its "up" display, the parameters need to be separated by a comma. In the example above the "delegate" function has 3 parameters. In the example above the "delegate" function has 3 parameters.
### Inputting parameters in the expanded view
Clicking the 'down' caret brings you to the *Multi-param Manager* - where you can input the parameters one at a time. **Much less confusing!** Clicking the 'down' caret brings you to the *Multi-param Manager* - where you can input the parameters one at a time. **Much less confusing!**
![](images/a-udapp-multi-param-man.png) ![](images/a-udapp-multi-param-man.png)
In the *Multi-param Manager*, strings do not need to be wrapped. In the expanded view, strings do not need to be wrapped.
Clicking the clipboard icon will encode the inputs and will copy them. Only a valid set of inputs can be encoded. Clicking the clipboard icon will encode the inputs and will copy them. Only a valid set of inputs can be encoded.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment