Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

Dashboard Debugger Docs and Some Rearranging #1435

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

OnlyOneJMJQ
Copy link
Contributor

@OnlyOneJMJQ OnlyOneJMJQ commented Jul 26, 2023

This PR does a number of things:

  1. Adds a docs page for Truffle Dashboard Debugger.
  2. Separates the definition of Dashboard from the Quickstart.
  3. Adds info on the npx initialization method.
  4. Reorganizes Dashboard docs to highlight usage with Hardhat.
  5. Elevates Truffle Dashboard to a top-level card on the docs landing.
  6. Removes Drizzle (😞) and other chains from the docs landing page and, where applicable, docs nav.

Once the prose is polished and I've tested it in Firefox and Safari in addition to Chrome, I'll request reviews.

@OnlyOneJMJQ OnlyOneJMJQ changed the title [WIP] Dashboard Debugger Docs and Some Rearranging Dashboard Debugger Docs and Some Rearranging Jul 27, 2023

## Starting a dashboard

To start a Truffle Dashboard, you need to run the `truffle dashboard` command in a separate terminal window.
To start a Truffle Dashboard, you need to run the `truffle dashboard` command (or `npx truffle dashboard`) in a separate terminal window.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this isn't something that you added but it feels weird to say "start a Truffle Dashboard"


Today it has 2 main features:

- Transaction Inspection and Signing: Developers primarily benefit from this by no longer having to manage their own private keys. By using Dashboard as their provider during development, transactions sent from their CLI, tests, and dapp frontend will be intercepted for inspection and signing with MetaMask. Inspection includes the decoded function name, supplied parameters, and more, in addition to the option to debug the transaction. This feature could be completely consumed by MetaMask.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the word after the ":" should be lowercase.

Today it has 2 main features:

- Transaction Inspection and Signing: Developers primarily benefit from this by no longer having to manage their own private keys. By using Dashboard as their provider during development, transactions sent from their CLI, tests, and dapp frontend will be intercepted for inspection and signing with MetaMask. Inspection includes the decoded function name, supplied parameters, and more, in addition to the option to debug the transaction. This feature could be completely consumed by MetaMask.
- Transaction Debugging: Dashboard’s GUI debugger is easier to use than a CLI debugger and is conveniently integrated into the transaction signing workflow. Truffle’s debugger supports older versions of Solidity and better decoding than competing debuggers such as Tenderly’s. Importantly for us, the debugger supplies us with data to extract more readily consumable insights, like revert locations and gas usage information.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here


## Connecting to the dashboard
### Connection

To make connecting to the Truffle Dashboard easy, Truffle includes a built in network named "dashboard". This built in network automatically uses the port and host specified in the dashboard configuration or falls back to the default `http://localhost:24012`. This built in network can be used with all your deployments or scripts.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, I know you didn't add this but "to the Truffle Dashboard" sounds weird.

<code>eth_signTypedData_v4</code>. We plan to support non-Truffle tooling such as Hardhat in the future.
</p>

Each time you run `truffle compile`, Truffle shares information about your contracts with Truffle Dashboard.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is currently a bug using truffle compile with Dashboard. Sometimes Truffle closes before the compilations can be saved. It sometimes works, however I think running truffle migrate in the Truffle development console while Dashboard is open is the way to guarantee they get saved.


# Truffle Dashboard: Debugger

Truffle’s debugger is best-in-class thanks to its codec handling vague types, ability to deal with malformed data, and supporter for older Soldiity versions. The primary method of accessing Truffle's debugger up to now has been via the CLI, but now you can enjoy a point-and-click debugging experience with Truffle Dashboard. Some developers prefer a GUI debugger as it’s easier to navigate with context and keeps things like variables and the stack close at hand.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"and support for older Solidity versions."


## Debugging from a Signature Confirmation

When a transaction appears in Truffle Dashboard for signature confirmation, you’ll see a Simulate button to the right of the other options on the card. Clicking this button will launch the debugger for this transaction.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button is actually named "Debug"


## Debugging from a Transaction Hash

You can paste any arbitrary transaction hash into the debugger rather than using the signature confirmation cards. Paste the desired transaction hash into the input at the upper-right of the debugger screen and click the debug button or press enter to start the debugger session. Note that the Debug button will be disabled until a valid transaction hash is provided.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small thing, but maybe it should be "click the Debug button or..."


There are 4 panels:

- **Code**: Contains the smart contract code we’re stepping through. Each contract involved in this transaction is displayed in a tab. If we’re unable to get the source code of a contract, we can still debug the transaction, but that particular contract will be opaque and you’ll see an “Unknown Contract” tab noting this.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we call this section "Source Code"? Another small thing but do whatever you want about this

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants