@ -10,11 +10,11 @@ After each compilation, a list is updated with all the newly compiled contracts.
`Details` modal dialog displays detailed information about the current selected contract.
`Details` modal dialog displays detailed information about the current selected contract.
From this tab, you can also publish your contract to Swarm (only non abstract contract can be published).
From this tab, you can also publish your contract to Swarm (only non abstract contracts can be published).
Published data contains notably the ``abi`` and solidity source code.
Published data notably contains the ``abi`` and solidity source code.
After a contract is published, you can find its metadata information using the `bzz` URL located in the details modal dialog ``SWARM LOCATION``.
After a contract is published, you can find its metadata information using the `bzz` URL located in the details modal dialog ``SWARM LOCATION``.
Compilation Errors and Warning are displayed below the contract section. At each compilation, the static analysis tab builds a report. It is very valuable to address reported issues even if the compiler doesn't complain.
Compilation Errors and Warning are displayed below the contract section. At each compilation, the static analysis tab builds a report. It is very valuable when addressing reported issues even if the compiler doesn't complain.
@ -5,11 +5,11 @@ The file explorer lists by default all the files stored in your browser. You can
..image:: images/remix_file_explorer_browser.png
..image:: images/remix_file_explorer_browser.png
Note that clearing the browser storage will permanently delete all the solidity sources you wrote. To avoid this, you can use Remixd, which enables you to store and sync files in the browser with your local files (for more information see :doc:`../tutorial_remixd_filesystem`)
Note that clearing the browser storage will permanently delete all the solidity files you wrote. To avoid this, you can use Remixd, which enables you to store and sync files in the browser with your local computer (for more information see :doc:`../tutorial_remixd_filesystem`)
..image:: images/remix_file_explorer_menu.png
..image:: images/remix_file_explorer_menu.png
From the left to the right:
We will start by reviewing at the icons at the top left - from left to the right:
There are 3 type of environments Remix can be plugged to (see :doc:`../run_tab`)
There are 3 type of environments Remix can be plugged to: ``Javascript VM``, ``Injected provider``, or ``Web3 provider``. (see :doc:`../run_tab`)
both ``Web3 provider`` and ``Injected provider`` requires the use of an external tool.
An Ethereum node for``Web3 provider`` and Mist or Metamask for ``Injected provider``.
Both``Web3 provider`` and ``Injected provider`` require the use of an external tool.
The ``JavaScript VM`` mode is convenient because every execution run in your browser.
The external tool for ``Web3 provider`` is an Ethereum node the tools for ``Injected provider`` are Mist or Metamask.
Thus reloading the page will restart Remix with en empty state. it might also be better to use an external node for better performances.
The ``JavaScript VM`` mode is convenient because each execution runs in your browser.
Thus reloading the page will restart Remix with an empty state.
So for performance purposes, it might also be better to use an external node.
Selecting the VM mode
Selecting the VM mode
---------------------
---------------------
@ -40,24 +43,24 @@ Sample contract
}
}
}
}
That contract is very very basic, the goal is to quiclky start to create and to interact with.
This contract is very basic. The goal is to quickly start to create and to interact with a sample contract.
Deploying an instance
Deploying an instance
---------------------
---------------------
The ``Compile tab`` displays informations related to the current contract (note that there can be more than one) (see :doc:`../compile_tab`).
The ``Compile tab`` displays information related to the current contract (note that there can be more than one) (see :doc:`../compile_tab`).
Switching now to ``Run tab`` allows to deploy an instance of the contract in the ``JavaScript VM`` state.
Moving on, in the ``Run tab`` select, ``JavaScript VM`` to specify that you are going to deploy an instance of the contract in the ``JavaScript VM`` state.
The constructor of ``testContract`` needs a parameter (of type ``uint``). give any value and click on ``Create``.
The constructor of ``testContract`` needs a parameter (of type ``uint``). Give any value and click on ``Create``.
The transaction which deploy the instance of ``testContract`` is created.
The transaction which deploys the instance of ``testContract`` is created.
That could take several seconds in a "normal" blockchain (time for the transaction to be mined), in our the case execution is immediate (JavaScript VM).
In a "normal" blockchain, it can take several seconds to execute. This is the time for the transaction to be mined. However, because we are using the ``JavaScript VM``, our execution is immediate.
Looking at the terminal will inform you about the transaction. You can see details and start debugging it.
The terminal will inform you about the transaction. You can see details there and start debugging.
The newly created instance is displayed in the ``run tab``.
The newly created instance is displayed in the ``run tab``.
This tab is an important section of Remix. It allows you to send transactions to the current environment.
The Run tab is an important section of Remix. It allows you to send transactions to the current environment.
..image:: images/remix_runtab.png
..image:: images/remix_runtab.png
Run Setup
Run Setup
---------
---------
These are the settings that enables you to directly influence the transaction execution:
The following settings allow you to directly influence the transaction execution:
- Environment:
- Environment:
- ``JavaScript VM``: All the transactions will be executed in a sandbox blockchain in the browser. That means nothing will be persisted and a page reload will restart a new blockchain from scratch, the old one will not be saved.
- ``JavaScript VM``: All the transactions will be executed in a sandbox blockchain in the browser. This means nothing will be persisted and a page reload will restart a new blockchain from scratch, the old one will not be saved.
- ``Injected Provider``: Remix will connect to an injected web3 provider. ``Mist`` and ``Metamask`` are example of providers that inject web3, thus can be used with this option.
- ``Injected Provider``: Remix will connect to an injected web3 provider. ``Mist`` and ``Metamask`` are example of providers that inject web3, thus can be used with this option.
- ``Web3 Provider``: Remix will connect to a remote node. You will need to provide the URL address to the selected provider: geth, parity or any Ethereum client.
- ``Web3 Provider``: Remix will connect to a remote node. You will need to provide the URL address to the selected provider: geth, parity or any Ethereum client.
- Account: list of accounts associated with the current environment (and their associated balances)
- Account: the list of accounts associated with the current environment (and their associated balances).
- Gas Limit: maximum amount of gas that can be set for all the transactions created in Remix
- Gas Limit: the maximum amount of gas that can be set for all the transactions created in Remix.
- Value: amount of value for the next created transaction (this value is always reset to 0 after each transaction execution)
- Value: the amount of value for the next created transaction (this value is always reset to 0 after each transaction execution).
..image:: images/remix_runtab_example.png
..image:: images/remix_runtab_example.png
@ -28,27 +28,27 @@ Initiate Instance
This section contains the list of compiled contracts and 2 actions:
This section contains the list of compiled contracts and 2 actions:
- ``At Address`` assumes the given address is an instance of the selected contract. It is then possible to interact with an already deployed contract. There's no check at this point so be careful when using this feature and be sure you trust the contract at that address.
- ``At Address`` assumes the given address is an instance of the selected contract. It is then possible to interact with an already deployed contract. There's no check at this point, so be careful when using this feature, and be sure you trust the contract at that address.
- ``Create`` send a transaction that deploy the selected contract. When the transaction is mined the newly created instance will be added (this might take several seconds). (note that if the ``constructor`` has parameters you need to specify them).
- ``Create`` send a transaction that deploys the selected contract. When the transaction is mined, the newly created instance will be added (this might take several seconds). Note that if the ``constructor`` has parameters, you need to specify them.
Pending Instances
Pending Instances
-----------------
-----------------
Validating a transaction take several seconds. During this time the GUI shows it in a pending mode. When transaction is mined the number of pending transactions is updated
Validating a transaction take several seconds. During this time, the GUI shows it in a pending mode. When transaction is mined the number of pending transactions is updated
and the transaction is added to the log (see :doc:`../terminal`)
and the transaction is added to the log (see :doc:`../terminal`)
Instances List
Instance List
--------------
--------------
This section contains list of instances to interact with.
This section contains a list of instances to interact with.
Several cases apply:
Several cases apply:
- The called function is declared as ``constant`` or ``pure`` in Solidity. The action has a blue background, clicking on it does not create a new transaction. (this is not necessary because there is not state changes) but will update the return value of the function.
- 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.
- 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 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 on it does create a new transaction and this transaction can accept value.
- 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.
For more information about Solidity modifier, see `Solidity modifier <http://solidity.readthedocs.io/en/develop/miscellaneous.html?highlight=pure#modifiers>`_ .
For more information about Solidity modifier, see `Solidity modifier <http://solidity.readthedocs.io/en/develop/miscellaneous.html?highlight=pure#modifiers>`_ .
Remix editor triggers a compilation each time the current file is changed or another file is selected. It also provides syntax highlighting mapped to solidity keywords.
The Remix editor recompiles the code each time the current file is changed or another file is selected. It also provides syntax highlighting mapped to solidity keywords.
This section provides a link to the Remix issues where users can report a bug or suggest a feature, other useful links and and it displays a `Remix developers' channel <http://gitter.im/ethereum/remix>`_
This section provides a link to Remix Issues where users can report a bug or suggest a feature, as well as providing other useful links. It also displays a `Remix developers' channel <http://gitter.im/ethereum/remix>`_
We will not explain in detail here how to write or deploy contract.
We will not explain in detail here how to write or deploy contract.
Let us start with a basic contract (replace this one by yours):
Let us start with a basic contract (replace this one by your's):
..code-block:: none
..code-block:: none
@ -53,9 +53,9 @@ Let us start with a basic contract (replace this one by yours):
}
}
}
}
For the purpose of this tutorial we will run the ``JavaScript VM`` (that's the default mode if you don't use Remix with Mist or Metamask) which 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`` (that's the default mode when you don't use Remix with Mist or Metamask). This simulates a custom blockchain. You could do the same using a proper backend node.
Let's deploy the contract:
Now, let's deploy the contract:
Right panel / Red button ``Create``
Right panel / Red button ``Create``
@ -80,7 +80,7 @@ From the Debugger
The debugger can be found in the right panel / 5th tab from the left.
The debugger can be found in the right panel / 5th tab from the left.
You can start a debug session by providing either a ``transaction hash`` or a ``block number`` and ``transaction index``
You can start a debug session by providing either a ``transaction hash`` or a ``block number`` and ``transaction index``.
..image:: remix3.png
..image:: remix3.png
@ -89,10 +89,10 @@ Click the ``play`` button to start debugging.
Using the debugger
Using the debugger
------------------
------------------
The debugger allows to see detailed informations about the transaction execution. It uses the editor (left panel) to display the location
The debugger allows one to see detailed informations about the transaction's execution. It uses the editor (left panel) to display the location
in the source code where the current execution is.
in the source code where the current execution is.
First the transaction panel display basic and simple information about the current transaction.
The transaction panel displays basic information about the current transaction.
..image:: remix_debugtransactioninfo.png
..image:: remix_debugtransactioninfo.png
@ -104,32 +104,32 @@ step over back, step into back, step into forward, step over forward, jump out (
..image:: remix_navigation.png
..image:: remix_navigation.png
11 panels give detailed informations about the execution:
11 panels give detailed information about the execution:
Instructions
Instructions
~~~~~~~~~~~~
~~~~~~~~~~~~
..image:: remix_debuginstructions.png
..image:: remix_debuginstructions.png
This panel displays the bytecode of the current executing contract, the current step is highlighted.
The Instructions panel displays the bytecode of the current executing contract- with the current step highlighted.
Important note:
Important note:
When this panel is hidden, the slider will have a courser granularity and only stop at expression boundaries, even if they are compiled into multiple EVM instructions.
When this panel is hidden, the slider will have a courser granularity and only stop at expression boundaries, even if they are compiled into multiple EVM instructions.
When the panel is diplayed, it will be possible to step over every instruction, even those that refers to the same expression.
When the panel is displayed, it will be possible to step over every instruction, even those that refers to the same expression.
Solidity Locals
Solidity Locals
~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~
..image:: remix_soliditylocals.png
..image:: remix_soliditylocals.png
That panel displays local variables associated with the current context.
The Solidity Locals panel displays local variables associated with the current context.
Solidity State
Solidity State
~~~~~~~~~~~~~~
~~~~~~~~~~~~~~
..image:: remix_soliditystate.png
..image:: remix_soliditystate.png
That panel displays state variables of the current executing contract.
The Solidity State panel displays state variables of the current executing contract.
@ -5,8 +5,8 @@ Debugging a Dapp using Remix - Mist - Geth
The ultimate goal of this tutorial is to debug transactions that have been created by a dapp front end.
The ultimate goal of this tutorial is to debug transactions that have been created by a dapp front end.
It is easy in Remix to debug a transaction created from its own GUI. Setting up an environment that allows to
It is easy in Remix to debug a transaction created from its own GUI. However, setting up an environment that allows you to
debug transactions created outside of Remix require a bit more of complexity.
debug transactions created outside of Remix, require a bit more of complexity.
We will need four tools for that :
We will need four tools for that :
@ -78,9 +78,9 @@ If we run Mist without any argument, its internal Geth node will run. As we have
(yes the option is --rpc)
(yes the option is --rpc)
Once Mist is started, Verify that it is connected to the test node (that's important!!).
Once Mist is started, verify that it is connected to the test node (that's very important!!).
On the bottom left check that the network is ``Private-net`` and that the block number is the same as reported by the test node we are currently running. Run the following command in the Geth Console to check: `web3.eth.blockNumber`.
On the bottom left, check that the network is ``Private-net`` and that the block number is the same as reported by the test node we are currently running. Run the following command in the Geth Console to check: `web3.eth.blockNumber`.
..image:: mist1.png
..image:: mist1.png
@ -91,7 +91,7 @@ Starting Remix
In Mist click on ``Develop`` / ``Open Remix IDE``
In Mist click on ``Develop`` / ``Open Remix IDE``
Remix will open in a new window. If this is the first time it is run, the ``Ballot`` contract is loaded.
Remix will open in a new window. If this is the first time it is run, the ``Ballot`` contract will be loaded.
Now, we need to check if Remix is connected to Mist:
Now, we need to check if Remix is connected to Mist:
@ -223,13 +223,14 @@ and here is the front end:
}
}
</script>
</script>
I would suggest to serve this file using ``http-serve``, but you can use any web server you like.
I would suggest serving this file using ``http-serve``, but you can use any web server you like.
Example: Dapp Front End https://github.com/ltfschoen/dapp_front_end
Example: Dapp Front End https://github.com/ltfschoen/dapp_front_end
Important notice !
Important notice !
~~~~~~~~~~~~~~~~~~
The variable ``contractspec`` contains the abi of the ``donation`` contract. it means that if you change something in the contract interface (function names, parameters, ...)
The variable ``contractspec`` contains the abi of the ``donation`` contract. This means that if you change something in the contract interface (function names, parameters, ...)
you need to copy the new abi from remix to the front end.
you need to copy the new abi from remix to the front end.
Deploying
Deploying
@ -239,7 +240,7 @@ Right panel / Red button ``Create``
..image:: remix1.png
..image:: remix1.png
This create a new transaction that deploy the ``Donation`` contract (Mist will ask for the usual pasphrase check).
This creates a new transaction that deploys the ``Donation`` contract (Mist will ask for the usual passphrase check).
Wait for the transaction to be mined (don't forget to activate mining ``miner.start()``).
Wait for the transaction to be mined (don't forget to activate mining ``miner.start()``).
Once this is done, you can use it by executing the ``moveFund`` and ``donate`` function. But this is not what we
Once this is done, you can use it by executing the ``moveFund`` and ``donate`` function. But this is not what we
@ -253,11 +254,11 @@ Debugging
---------
---------
From Mist, browse the above front end.
From Mist, browse the above front end.
In the first field, paste the address of the newly created contract, and let's call the first function (label ``give``).
In the first field, paste the address of the newly created contract. Now, let's call the first function (label ``give``).
You will need an account and a value.
You will need an account and a value.
The account could be any account that are declared in the Wallet section of Mist. This is the sender of the transaction we are going to create.
The account could be any account that is declared in the Wallet section of Mist. This is the sender of the transaction that we are going to create.
The value should be no more than the actual balance of the account - the unit is in `wei`, so just put ``100`` (100 wei), that should be fine.
The value should be no more than the actual balance of the account - the unit is in `wei`, so just put ``100`` (100 wei), that should be fine.
Click on ``Give`` and wait for the transaction to be mined.
Click on ``Give`` and wait for the transaction to be mined.
@ -267,7 +268,7 @@ It was easier for the purpose of this tutorial to just log transactions in a div
There is only one field that we need, this is the ``transactionHash``.
There is only one field that we need, this is the ``transactionHash``.
Copy it and switch to Remix. On the right half, the fifth panel shows a small "bug" icon, that is the debugger.
Copy it and switch to Remix. On the right side, the fifth panel shows a small "bug" icon, that is the debugger.
Paste the hash into the transaction field and click on the ``play`` button.
Paste the hash into the transaction field and click on the ``play`` button.
@ -275,14 +276,14 @@ Paste the hash into the transaction field and click on the ``play`` button.
You are now entering a debug session for the call to ``donate``.
You are now entering a debug session for the call to ``donate``.
Debugging in Remix is not much easier than with common tools like gdb because you can freely move in time.
Debugging in Remix is easier than with common tools like gdb because you can freely move in time.
Use the slider to change the current step and click on the panels below to expand them and explore the curret state, local variables, etc.
Use the slider to change the current step and click on the panels below to expand them and explore the curret state, local variables, etc.
There are also breakpoints to move between sections of the code quickly, but more on all that later.
There are also breakpoints to move between sections of the code quickly, but more on all that later.
At the time of writing there is an issue that could break the contract creation.
At the time of this writing, there is an issue that could break the contract creation.
There is a workaround for that at https://github.com/ethereum/go-ethereum/issues/3653 .
The a workaround for that at https://github.com/ethereum/go-ethereum/issues/3653 .
Please follow the workaround or wait for this issue to be closed.
Please follow the workaround or wait for this issue to be closed.
Also, though retrieving a contract's storage when Remix is using the JavaScript VM is working well,
Also, although retrieving a contract's storage when Remix is using the JavaScript VM is working well,
there is still work to be done when Remix is using eth or geth as backend.
there is still work to be done when Remix is using eth or geth as backend.
yann300
7 years ago
committed by
GitHub