Skip to content
This repository has been archived by the owner on Mar 3, 2021. It is now read-only.

Docs update #1196

Merged
merged 2 commits into from
May 23, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/images/a-debug1-deploy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/a-debug2-udapp1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/a-debug2-udapp1a.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/a-debug3-udapp2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/a-debug4-value-loc.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/a-debug5-term-debug-but.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/a-plugin-man-local.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/file-explorer-buttons.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/layout1b.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 17 additions & 3 deletions docs/plugin_manager.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,22 @@
Plugin Manager
===================

** This is text copied from layout.md - it needs an image & more info about connect to the local plugin
## Everything is a PLUGIN in Remix

In order to make Remix flexible for integrating changes into its functionality and for integrating remix into other projects (your's for example), we've now made everything a plugin. This means that you only load the functionality you need. It also means that you need a place to turn off and on plugins - as your needs change. This all happens in the plug manager.
In order to integrate new tools made by us and by ...you into Remix, we've now made everything a plugin.
This architcture will also allow Remix or just parts of Remix to be integrated into other projects (your's for example).

The Plugin Manager is also the place you go when you are creating your own plugin and you want to load your local plugin into Remix. In that case you'd click on the "Connect to a Local Plugin" link at the top of the Plugin Manager panel.
This means that you only load the functionality you need.

It also means that you can turn off and on plugins - as your needs change.

This all happens in the plug manager.

The Plugin Manager is also the place you go when you are creating your own plugin and you want to load your local plugin into Remix.

To load your local plugin, you'd click on the "Connect to a Local Plugin" link at the top of the Plugin Manager panel.

![](images/a-plugin-man-local.png)

To learn more about how to create your own plugin, go to
[the README of remix-plugin repo](https://github.com/ethereum/remix-plugin).
115 changes: 66 additions & 49 deletions docs/tutorial_debug.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,47 @@
Debugging transactions
======================

The goal of this tutorial is to explain how to debug transaction using
Remix.
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 Debugger - use this if you have a *transaction hash* or a *block number* with a *transaction index*.

Start debugging
---------------
### Debug from the Transaction GUI -

There are two different ways to start debugging, each way correspond to
a different use case.

### From the Transaction GUI

We will not explain in detail here how to write or deploy contract. Let
us start with a basic contract (replace this one by your's):
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.
- copy the code below.
- compile the code.
- click the Run & Deploy icon in the icon panel.

```
{.sourceCode .none}
{.sourceCode .none} - RS why is this here?
pragma solidity >=0.5.1 <0.6.0;
contract Donation {
address owner;
event fundMoved(address _to, uint _amount);
modifier onlyowner { if (msg.sender == owner) _; }
address[] _giver;
uint[] _values;

function Donation() {
constructor() public {
owner = msg.sender;
}

function donate() payable {
function donate() payable public {
addGiver(msg.value);
}

function moveFund(address _to, uint _amount) onlyowner {
uint balance = this.balance;
function moveFund(address payable _to, uint _amount) onlyowner public {
uint balance = address(this).balance;
uint amount = _amount;
if (_amount <= this.balance) {
if (_to.send(this.balance)) {
fundMoved(_to, _amount);
if (_amount <= balance) {
if (_to.send(balance)) {
emit fundMoved(_to, _amount);
} else {
throw;
revert();
}
} else {
throw;
revert();
}
}

Expand All @@ -53,50 +52,65 @@ contract Donation {
}
```

For the purpose of this tutorial, we will run the `JavaScript VM`
(that's the default mode when you don't use Remix with Metamask). This simulates a custom blockchain. You could do the same using a proper backend node.
For the purpose of this tutorial, we will run the `JavaScript VM`.
This simulates a custom blockchain. You could do the same using a proper backend node.

Let's deploy the contract:

Click the `Deploy` button

![](images/a-debug1-deploy.png)

You'll see the deployed instance (AKA the udapp).

Now, let's deploy the contract:
![](images/a-debug2-udapp1a.png)

Right panel / Red button `Create`
Then open it up (by clicking the caret).

![image](remix1.png)
![](images/a-debug3-udapp2.png)

Then we should call the `Donate` function (that will send Ether to the
contract).

Let's set the amount of Ether:
We are going to call the `Donate` function and will send it ether.

Right panel / second tab from the left - fill in the ´´value´´ input (´1
ether´ for instance)
To do this: in the value input box put in **2** and select Ether as the unit (and not wei like I did in the image below - well you could - it won't really change anything).

![image](remix_valueinput.png)
![](images/a-debug4-value-loc.png)

Then click on `Donate`. As we are using the `JavaScript VM`, everything
goes almost instantly.
Then click the `Donate` button.

Remix displays also some information related to each transaction result.
In the terminal, the transaction is logged and you can start debugging
it.
This will send Ether to the this function.

![image](remix_startdebugging.png)
Because we are using the `JavaScript VM`, everything happens almost instantly. (If we had been using Injected Web 3, then we would have to need to approve the transaction, pay for gas and wait for the transaction to get mined.)

Remix displays information related to each transaction result in the terminal.

Check in the **terminal** where the transaction you just made is logged.

Click the debug button to start debugging it.

![](images/a-debug5-term-debug-but.png)

### From the Debugger

The debugger can be found in the right panel / 5th tab from the left.
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.

You can start a debug session by providing either a `transaction hash`
or a `block number` and `transaction index`.

To find a transaction hash
1. go to a transaction in the terminal.
2. Click a line with a transaction - to exand the log.
3. Copy the transaction has locate there.

![image](remix3.png)

Click the `play` button to start debugging.
Then click on the `start debugging` button.

Using the debugger
------------------

The debugger allows one to see detailed informations about the
transaction's execution. It uses the editor (left panel) to display the
transaction's execution. It uses the editor to display the
location in the source code where the current execution is.

The transaction panel displays basic information about the current
Expand Down Expand Up @@ -125,7 +139,7 @@ The Instructions panel displays the bytecode of the current executing
contract- with the current step highlighted.

Important note: When this panel is hidden, the slider will have a
courser granularity and only stop at expression boundaries, even if they
courser granularity and only stop at *expression boundaries*, even if they
are compiled into multiple EVM instructions. When the panel is
displayed, it will be possible to step over every instruction, even
those that refers to the same expression.
Expand Down Expand Up @@ -159,10 +173,10 @@ These panels display low level informations about the execution:

### Reverted Transaction

A transaction could be reverted (either because of out of gas exception,
Solidity `throw` or low level exception).
A transaction could be `reverted` (because of an *out of gas exception* or
Solidity `revert` statement or because of a low level exception).

In that case it is important to be aware of the exception and to locate
It is important to be aware of the exception and to locate
where the exception is in the source code.

Remix will warn you when the execution throws an exception. The
Expand All @@ -176,22 +190,25 @@ happened.
The two last buttons from the navigation area are used to jump either
back to the previous breakpoint or forward to the next breakpoint.

Breakpoints can be added and removed by clicking on the line number.
Breakpoints can be added and removed by clicking on the line number in the *Editor*.

![image](remix_breakpoint.png)

When a debug session is started, the execution will jump to the first
When using debug session with breakpoints, the execution will jump to the first
encountered breakpoint.

Important note: If you add a breakpoint to a line that declares a
**Important note:** If you add a breakpoint to a line that declares a
variable, it might be triggered twice: Once for initializing the
variable to zero and second time for assigning the actual value. As an
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;

contract ctr {
function hid () {
function hid () public {
uint p = 45;
uint m;
m = 89;
Expand Down
25 changes: 14 additions & 11 deletions docs/udapp.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,24 @@ Run & Deploy (part 2)

This section in the Run tab contains a list of deployed contracts to interact with through autogenerated UI of the deployed contract (also called udapp).

**Needs an Image**
The deployed contract appears but is in its collapsed form.

Several cases apply:
![](images/a-debug2-udapp1a.png)

- The called function is declared as `constant` or `pure` in Solidity. The action has a blue background, clicking it does not
create a new transaction. Clicking it is not necessary because there are not state changes - but it will update the return
value of the function.
Click the sideways caret to open it up.

- The called function has no special keywords. The action has a
light red background, clicking on does create a new transaction.
But this transaction cannot accept any amount of Ether.
![](images/a-debug3-udapp2.png)

- The called function is declared as `payable` in Solidity. The
action has a red background, clicking it does create a new
transaction and this transaction can accept value.
You will see the functions in the contract. The functions buttons can have different color buttons.

- Functions that are `constant` or `pure` functions in Solidity have a blue buttons. Clicking one of this type does not create a new transaction. So clicking will not cause state changes - it will only return a value stored in the contract - so it won't cost you anything in gas fees.

- Functions that changes the state of the contract are orange, clicking this type of function will cost gas and they do change the state of the contract and so they do create a new transaction.
But this transaction does not accept Ether.

- Functions that have red buttons are `payable` functions in Solidity. Clicking one of these will create a new transaction and this transaction can accept a **value**. The **value** is put in in the Value field which is under the Gas Limit field.

![](images/a-jvm-calling-instance.png)


For more information see more about [Solidity
Expand Down