# Code Europe: Increasing developer effectivity by merging browser tooling and editors

* [Microsoft Edge DevTools documentation overview](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/landing/)
* [Can I use?](https://caniuse.com/) browser compatibility and support charts
* [DevTools inspect tool](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/css/inspect)
* [DevTools Elements Tool](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/elements-tool/elements-tool)
* [DevTools CSS Grid Inspection](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/css/grid)
* [DevTools Font Editor](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/inspect-styles/edit-fonts)
* [DevTools Issues tool](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/issues/)
* [Filtering Issue Reports](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/issues/#filter-issues)
* [Filtering Console Messages](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-filters)
* [Device Emulation](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/device-mode/)
* [Mode Emulation](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation)
* [Visual Deficiencies Emulation](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/accessibility/emulate-vision-deficiencies)
* [Opening files from DevTools in VS Code](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode)
* [Edge DevTools for VS Code Extension](https://aka.ms/devtools-for-code)
* [Edge DevTools for VS Code GitHub Repository](https://github.com/microsoft/vscode-edge-devtools/)
* [Edge DevTools GitHub Repository](https://github.com/MicrosoftEdge/DevTools/)
* [Visual Studio Code for the web](https://code.visualstudio.com/blogs/2021/10/20/vscode-dev)
* [GitHub CoPilot](https://copilot.github.com/)

# Code Europe Breakout session deep dive

* Blog Post: [Automatically starting a server when starting a debug session](https://christianheilmann.com/2022/03/17/automatically-starting-a-server-when-starting-a-debug-session-in-vs-code/) 
* [YouTube Video](https://www.youtube.com/watch?v=n55Cv5tU6uI&feature=emb_title)
* [Demo Code To Do App](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do)
 
Demo code `launch.json`:

```javascript
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "webdebug",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "runtimeExecutable": "canary",
            "runtimeArgs": ["--headless"],
            "preLaunchTask": "start server",
            "postDebugTask": "stop server"
        },
    ]
}
```
Demo code `tasks.json`:

```javascript
{
  "version": "2.0.0",
  "tasks": [
    {
        "label": "start server",
        "type": "shell",
        "isBackground": true,
        "command": "http-server",
        "presentation": { "reveal": "silent" },
        "problemMatcher": [{
          "pattern": [{
            "regexp": ".",
            "file": 1,"line": 1,
            "column": 1,"message": 1
          }],
          "background": {
              "activeOnStart": true,
              "beginsPattern": { "regexp": "." },
              "endsPattern": { "regexp": "." }
          },
        }]
    },
    {
        "label": "stop server",
        "command": "echo ${input:terminate}",
        "type": "shell"
    },
  ],
  "inputs": [{
    "id": "terminate",
    "type": "command",
    "command": "workbench.action.tasks.terminate",
    "args": "terminateAll"
  }]
}
```

* [Skillshare Course on Accessibility Tooling](https://skl.sh/3eCFWRR)
* [Accessibility Tooling in DevTools overview](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools)