{"id":13828965,"url":"https://github.com/BlankSourceCode/vscode-devtools","last_synced_at":"2025-07-09T08:31:05.320Z","repository":{"id":47020950,"uuid":"155101537","full_name":"BlankSourceCode/vscode-devtools","owner":"BlankSourceCode","description":"A VSCode extension to host the chrome devtools inside of a webview.","archived":true,"fork":false,"pushed_at":"2021-09-16T21:44:39.000Z","size":14598,"stargazers_count":185,"open_issues_count":0,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-05T09:18:38.950Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlankSourceCode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-28T18:20:40.000Z","updated_at":"2024-07-10T13:10:27.000Z","dependencies_parsed_at":"2022-08-12T13:11:28.069Z","dependency_job_id":null,"html_url":"https://github.com/BlankSourceCode/vscode-devtools","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlankSourceCode%2Fvscode-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlankSourceCode%2Fvscode-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlankSourceCode%2Fvscode-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlankSourceCode%2Fvscode-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlankSourceCode","download_url":"https://codeload.github.com/BlankSourceCode/vscode-devtools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225517603,"owners_count":17483515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T09:03:23.290Z","updated_at":"2024-11-20T09:30:30.153Z","avatar_url":"https://github.com/BlankSourceCode.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# THIS PROJECT IS NO LONGER UNDER ACTIVE DEVELOPMENT\n\nThis was a project that I took on in my spare time to show the potential of having the DevTool embedded directly in VS Code. Unfortunately I no longer have the time to keep this up to date with all the new changes in Chrome, so I am archiving the project and will be removing it from the VS Code marketplace.\n\nHowever, I think the experiment was a success, and it worked so well in fact, that there is now an officially supported version from Microsoft for the Edge DevTools, which you should check out at the following links:\n\n[Microsoft Edge Developer Tools for Visual Studio Code](https://github.com/microsoft/vscode-edge-devtools)\n\n[Microsoft Edge Developer Tools integration in VS Code](https://docs.microsoft.com/en-us/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension#browser-debugging-with-microsoft-edge-devtools-integration-in-visual-studio-code)\n\nYou can install the Edge version from the [VS Code marketplace](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools)\n\nThanks to everyone that installed/used/filed issues for this project, and I hope it was useful while it lasted.\n\n# VSCode DevTools for Chrome\n\nA VSCode extension to host the chrome devtools inside of a webview.\n\n\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=codemooseus.vscode-devtools-for-chrome\"\u003e\n        \u003cimg src=\"https://vsmarketplacebadge.apphb.com/version/codemooseus.vscode-devtools-for-chrome.svg\" alt=\"Marketplace badge\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Attaching to a running chrome instance:\n![Demo1](demo.gif)\n\n## Launching a 'debugger for chrome' project and using screencast:\n![Demo2](demo2.gif)\n\n# Using the extension\n\n## Launching as a Debugger\nYou can launch the Chrome DevTools hosted in VS Code like you would a debugger, by using a launch.json config file. However, the Chrome DevTools aren't a debugger and any breakpoints set in VS Code won't be hit, you can of course use the script debugger in Chrome DevTools. \n\nTo do this in your `launch.json` add a new debug config with two parameters.\n- `type` - The name of the debugger which must be `devtools-for-chrome`. Required.\n- `url` - The url to launch Chrome at. Optional.\n- `file` - The local file path to launch Chrome at. Optional.\n- `request` - Whether a new tab in Chrome should be opened `launch` or to use an exsisting tab `attach` matched on URL. Optional.\n- `name` - A friendly name to show in the VS Code UI. Required.\n```\n{\n    \"version\": \"0.1.0\",\n    \"configurations\": [\n        {\n            \"type\": \"devtools-for-chrome\",\n            \"request\": \"launch\",\n            \"name\": \"Launch Chrome DevTools\",\n            \"file\": \"${workspaceFolder}/index.html\"\n        },\n        {\n            \"type\": \"devtools-for-chrome\",\n            \"request\": \"attach\",\n            \"name\": \"Attach Chrome DevTools\",\n            \"url\": \"http://localhost:8000/\"\n        }\n    ]\n}\n```\n\n## Launching Chrome manually\n- Start chrome with no extensions and remote-debugging enabled on port 9222:\n    - `chrome.exe --disable-extensions --remote-debugging-port=9222`\n- Open the devtools inside VS Code:\n    - Run the command - `DevTools for Chrome: Attach to a target`\n    - Select a target from the drop down\n\n## Launching Chrome via the extension\n- Start chrome:\n    - Run the command - `DevTools for Chrome: Launch Chrome and then attach to a target`\n    - Navigate to whatever page you want\n- Open the devtools inside VS Code:\n    - Select a target from the drop down\n\n\n# Known Issues\n- Prototyping stage\n- Having the DevTools in a non-foreground tab can cause issues while debugging\n    - This is due to VS Code suspending script execution of non-foreground webviews\n    - The workaround is to put the DevTools in a split view tab so that they are always visible while open\n- Chrome browser extensions can sometimes cause the webview to terminate\n\n# Developing the extension itself\n\n- Start chrome with remote-debugging enabled on port 9222\n    - `chrome.exe --disable-extensions --remote-debugging-port=9222`\n- Run the extension \n    - `npm install`\n    - `npm run watch` or `npm run build`\n    - Open the folder in VSCode\n    - `F5` to start debugging\n- Open the devtools \n    - Run the command - `DevTools for Chrome: Attach to a target`\n    - Select a target from the drop down\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlankSourceCode%2Fvscode-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBlankSourceCode%2Fvscode-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlankSourceCode%2Fvscode-devtools/lists"}