Test and debug section (#16)

# What 💻 
* Add test and debug section to docs

components/content/DropPanel/DropPanel.vue

@@ -28,6 +28,13 @@
  * for multiple panels to be open at once.
  *
  * Use Panel component to slot in panels.
+ *
+ * @example
+ * ::drop-panel
+ *  ::panel{label="Tab Label"}
+ *  Panel Content
+ *  ::
+ * ::
  */
 import { useSlots, computed } from 'vue';
 

components/content/DropPanel/Panel.vue

@@ -7,5 +7,12 @@
  * A panel component that can be slotted into a DropPanel.
  *
  * Use the `label` prop to set the tab label on the drop panel.
+ *
+ * ::panel{label="Tab Label"}
+ * Panel Content
+ * ::
  */
+defineProps<{
+  label: string;
+}>();
 </script>

content/40.tooling/20.hardhat/10.getting-started.md

@@ -32,7 +32,7 @@ To learn more about Hardhat itself, check out :external-link{text="the official
 This tutorial shows you how to setup a zkSync Era Solidity project with Hardhat using the [zkSync CLI](/tooling/zksync-cli).
 
 If you are using Vyper, check out the [Vyper plugin documentation](./hardhat-zksync-vyper)
-or the [vyper-example](https://github.com/matter-labs/hardhat-zksync/tree/main/examples/vyper-example) in GitHub!
+or the [vyper-example](%%zk_git_repo_hardhat-zksync%%/tree/main/examples/vyper-example) in GitHub!
 
 ## Prerequisites
 

content/40.tooling/20.hardhat/90.hardhat-zksync-verify-vyper.md

@@ -24,7 +24,7 @@ On the other hand, we are working on removing this limitation
 and we want to encourage you to give us your feedback on the plugin's functionalities, usability or possible improvements.
 Please start or engage in the discussion about it
 in our :external-link{text="Community Hub" href="%%zk_git_repo_zksync-developers%%/discussions"},
-or open a Github issue in the :external-link{text="project's repository" href="https://github.com/matter-labs/hardhat-zksync/issues"}.
+or open a Github issue in the :external-link{text="project's repository" href="%%zk_git_repo_hardhat-zksync%%/issues"}.
 ::
 
 ::callout{icon="i-heroicons-exclamation-triangle" color="amber"}

content/60.test-and-debug/00.index.md

@@ -0,0 +1,66 @@
+---
+title: Getting Started
+description: Learn about the recommended paths of testing and debugging your projects on zkSync.
+---
+
+zkSync Era provides two distinct testing environments for your local development needs:
+
+- Dockerized local setup
+- In-Memory Node.
+
+Each solution boasts unique characteristics tailored to diverse use cases.
+This section aims to unpack the intricacies of these tools, aiding you in selecting the setup best suited for your development workflow.
+
+---
+## In-Memory node vs Dockerized local setup
+
+The local testing process revolves around two principal options:
+
+1. **Dockerized local setup**: An extensive zkSync Era network simulation that comprises a Postgres database,
+a local Geth node functioning as Layer 1, and the zkSync node.
+Opt for this setup for comprehensive simulations and testing that require interaction with both L1 and L2.
+
+2. **In-Memory node**: A lightweight, speedy alternative, the in-memory node, supports forking the state from various networks,
+including the mainnet and testnet. This choice is ideal for swift testing, prototyping, and bootloader and system contract testing.
+
+### When to use each
+
+- Use the **Dockerized local setup** for in-depth simulations and tests that necessitate L1 and L2 interaction.
+This detailed setup mirrors how your contracts will function within the mainnet zkSync Era network.
+
+- Opt for the **In-Memory node** for swift testing, prototyping, or testing new changes via the local bootloader and system contracts.
+This setup facilitates forking the state from the mainnet or testnet, suitable for replaying transactions
+or observing the impact of modifications on existing contracts.
+
+<!-- TODO: is this still a thing to callout? -->
+::callout{icon="i-heroicons-information-circle-16-solid" color="amber"}
+Being in its alpha stage, the In-Memory Node comes with some constraints and doesn't fully support all functionalities.
+For definitive testing, the Dockerized local setup or a testnet is highly recommended.
+::
+
+### Feature comparison
+
+The following table highlights the key characteristics of each testing environment for a quick comparison:
+
+| Feature                                 | In-memory node      | Dockerized local setup |
+| --------------------------------------- | ------------------- | ---------------------- |
+| Quick startup                           | Yes                 | No                     |
+| Supports forking state                  | Yes                 | No                     |
+| Console.log debugging                   | Yes                 | No                     |
+| Detailed call traces                    | Yes                 | No                     |
+| Pre-configured 'rich' accounts          | Yes                 | Yes                    |
+| Replay existing transactions            | Yes                 | No                     |
+| Fast for integration testing            | Yes                 | No                     |
+| Communication between Layer 1 & Layer 2 | No                  | Yes                    |
+| Multiple transactions per batch         | No                  | Yes                    |
+| Complete set of APIs                    | No (Basic set only) | Yes                    |
+| Websocket support                       | No                  | Yes                    |
+
+Whether you're testing new contracts, debugging transactions, or prototyping, zkSync Era provides robust options for local testing.
+Both the Dockerized local setup and the In-Memory Node offer feature-rich and quick setup options, each with their distinct strengths and limitations.
+Choose the most appropriate setup based on your specific needs, and happy testing!
+
+## Use zkSync CLI for easy setup
+
+The [zkSync CLI](/tooling/zksync-cli) makes it simple for developers to work with both the Dockerized local setup and In-Memory Node.
+Use `zksync-cli dev start` to get your local development environment running along with additional modules like Block Explorer, Wallet and Bridge.

content/60.test-and-debug/10.dockerized-l1-l2-nodes.md

@@ -0,0 +1,103 @@
+---
+title: Docker L1 - L2 Nodes
+description: Guide to setup dockerized containers of L1 and L2 nodes.
+---
+
+Welcome to this step-by-step guide on establishing a local testing environment using Docker for zkSync development.
+With this guide, you can effortlessly emulate the zkSync environment on your local system, making it simpler to test and develop features.
+Let's get started!
+
+**Prerequisites**:
+
+1. **Docker and docker-compose**: Ensure that Docker and `docker-compose` are installed on your machine.
+If you haven't already installed them, follow the :external-link{text="installation guide" href="https://docs.docker.com/get-docker/"}.
+2. **zkSync Hardhat plugins**: A foundational understanding of the zkSync Hardhat plugins will be beneficial.
+New to zkSync development with Hardhat? Explore the [Getting Started section](/tooling/hardhat/getting-started).
+
+---
+
+## Set up the testing environment
+
+1. Clone the dockerized zkSync project repository to your local machine:
+
+    ```bash
+    git clone %%zk_git_repo_local-setup%%
+    ```
+
+1. To start the local node, navigate to the cloned directory:
+
+    ```bash
+    cd local-setup
+    ```
+
+1. Launch the zkSync Era node locally using the `start.sh` script:
+
+    ```bash
+    ./start.sh
+    ```
+
+    This script spins up three essential docker containers:
+
+    1. **Postgres**: The database supporting zkSync.
+    2. **Local Geth node**: Acts as the Layer 1 (L1) for zkSync.
+    3. **zkSync node**: The core component.
+
+::callout{icon="i-heroicons-light-bulb" color="blue"}
+The first execution of the `start.sh` script should proceed without interruptions.
+If it halts unexpectedly, you might need to reset the local zkSync state and retry.
+The initialization might take up to 10 minutes initially.
+::
+
+### Network Details
+
+- **HTTP JSON-RPC API**: Accessible via port 3050.
+- **WebSocket (WS) API**: Accessible through port 3051.
+
+  Default endpoints:
+
+- **L1 RPC**: <http://localhost:8545>
+- **L2 RPC**: <http://localhost:3050>
+- **WS API**: <http://localhost:3051>
+
+  **Network Id**: 270
+
+---
+## Reset the zkSync State
+
+If you need to revert the zkSync state to its initial configuration, execute the `clear.sh` script:
+
+```bash
+./clear.sh
+```
+
+In the event of a "permission denied" error, run the following script with root access:
+
+```bash
+sudo ./clear.sh
+```
+
+---
+## Leverage rich wallets
+
+The local zkSync setup generously equips test wallets with ample amounts of ETH on both L1 and L2, making testing easier.
+
+::drop-panel
+  ::panel{label="Rich Wallets"}
+    :display-partial{path="_partials/_rich-wallets"}
+  ::
+::
+
+---
+## Custom configurations (advanced)
+
+To operate with a custom Postgres database or a distinct Layer 1 node,
+you'll need to adjust environment variables within the `docker-compose` file:
+
+```yaml
+environment:
+  - DATABASE_URL=postgres://postgres@postgres/zksync_local
+  - ETH_CLIENT_WEB3_URL=http://geth:8545
+```
+
+`DATABASE_URL` is the connection URL to the Postgres database,
+and `ETH_CLIENT_WEB3_URL` is the endpoint URL for the HTTP JSON-RPC interface of the L1 node.