** 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.
To learn more about how to create your own plugin, go to
[the README of remix-plugin repo](https://github.com/ethereum/remix-plugin).
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);
@ -24,25 +23,25 @@ contract Donation {
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();
}
}
@ -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
You'll see the deployed instance (AKA the udapp).
Now, let's deploy the contract:
Right panel / Red button `Create`
Then open it up (by clicking the caret).
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).
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.
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.
### 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.
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
@ -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.
@ -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
@ -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*.
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:
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:
- 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.
- 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.
Rob Stupay
6 years ago
