Comments (7)
I don't think we're going to get to this into Sprint 3, might want to leave it for the next sprint.
from debugger.
agreed.
from debugger.
Here's what I've learned so far experimenting with running inside Chrome.
Chrome Extension
Chrome allows for most of the pieces we need but ultimately prevents us from running as a real debugger within a devtools panel.
Chrome allows for extensions to access the Chrome RDP via an API: https://developer.chrome.com/extensions/debugger and it also allows for us to create our own panels https://developer.chrome.com/extensions/devtools_panels However it does not allow for an extension to attach the debugger to a tab which has the developer tools open. Meaning we can't have a competing debugger running in a panel within the developer tools; their debugger always wins.
Therefore if we want to remain an extension we need to find another way to present our debugger to Chrome users that doesn't require their devtools to be open. I'm not sure that we want to remain an extension given this limitation but here are some ideas for how we could do this.
Alternate extension approaches
One major limitation to keep in mind with any extension approach is that if the user opens the existing developer tools at anytime, our connection to the debugger will be terminated. Our extension will receive a notification about the termination however there is nothing we can do to reconnect until the developer tools are closed again by the user. i.e. we'll have to put up a notice saying "Please close the Chrome devtools to continue"
Separate Window
As an extension we could offer a toolbar button that opens a new window with our tools in it, from this window we could offer the list of tabs in the browser and attach to any available tab which doesn't already have a debugger attached to it.
Separate Panel
Very similar to the window approach we could create a different window type, called a panel which would eliminate most of the window chrome making us look more native. Its available from the Chrome Window API : WindowType However this approach requires our users to turn on a flag in the chrome://flags/#enable-panels page.
Separate App
The advantages of being an extension, ease of installation and devtools panel, don't see to outweigh the disadvantages we are facing in terms of not being able to run our debugger inside a devtools panel. I'd recommend looking at running our debugger as a separate application that connects to Chrome remotely. Much like the VS Code Debugger we'll need to spend time making sure people have opened Chrome with the correct command line flags but once they are connected we could possibly offer them a much more compelling experience than what is available via an extension.
There could be hybrid approach where we offer a helper extension that opens our separate app and lets you know what tabs our app is connected to. The extension avenue isn't a total waste, just not a good one right now.
from debugger.
Thanks Bryan for investigating.
from debugger.
after investigating there will be a couple breakdown tasks
- show chrome tabs
- setup chrome front api
- connect to tab
from debugger.
here's the work for updating tab ids and debugTab jlongster@c0f2ddb
here's the commit for adding scriptParsed: jlongster@7f9b2fa
from debugger.
done. If we want to do more work connecting to chrome we can open a new ticket
from debugger.
Related Issues (20)
- [SourceTree] Can't copy event function source
- [Theme] TypeScript had black characters with dark theme HOT 5
- quote differences in the source and the event flag excerpt HOT 1
- Frozen debugger after breakpoint activation on remote debugging. HOT 6
- [Docs] More inclusive language in the documentation HOT 2
- yarn start no result: waiting for localhost .. HOT 1
- Call stack highlightling changes the links and names (through prettify) HOT 1
- Clearly state that the debugger's development now happens elsewhere HOT 2
- Source Maps not when using debugger with npm start HOT 1
- DOM "Break on > Attribute Modification" does not trigger when node is set to `display: none` HOT 1
- backslash and escape sequence HOT 1
- Debug
- Multi row strings make the debugger lines jump up and down HOT 5
- cheap-module-source-map does not show source maps. HOT 3
- Variables in debugging are unreadable HOT 1
- No hover popup on variable HOT 9
- Option to ignore scripts from addons
- Cant access this context after promise return HOT 1
- Option to save scripts automatically and execution blocks
- Webpack not working in Firefox 86 Developer Edition HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from debugger.