firefox-devtools / debugger Goto Github PK
View Code? Open in Web Editor NEWThe faster and smarter Debugger for Firefox DevTools š„š¦š
Home Page: https://firefox-dev.tools/
The faster and smarter Debugger for Firefox DevTools š„š¦š
Home Page: https://firefox-dev.tools/
User Stories
As a web developer, when my code hits a break point I would like to see an indication of which breakpoint was triggered and in which files such that I can inspect the code at that location.
It'd be nice to move the build directory into the public
. The rationale is that then all debugger assets are under public.
When you add breakpoints in source a, go to source b, and navigate back to source a, the breakpoint markers are not shown.
This is a relatively easy fix, but it probably requires us to re-think the way we're writing the Editor component, to better take advantage of the redux store.
Might as well get a basic server going so avoid file:// issues. A simple express server that serves the static assets works, unless there's something else?
So, this is a little ironic, and mostly sad, but when I'm debugging debugger.html in Chrome, chome devtools is very unreliable. I'd like to get to the bottom of this, I'm not sure if it's a websocket thing, webpack source map thing, or what, but it makes it very difficult to make progress.
The Pane / Splitter Component needs to be made more robust in terms of CSS to prevent things like over expansion from child content.
User Stories
As a web developer I need to be able to toggle breakpoints in other areas of code that aren't visible in the debugger editor such that I can avoid hitting breakpoints I'm not currently interested in.
We should update the editor styles so that they are the same as the firefox editor.
Here is a link to the official stylesheet
Currently attributes filename
and pathname
are set in the reducer in _updateText
. They should be moved to selectors getFilenameFromSource
and getPathnameFromSource
.
Set clear expectations and guidelines for contributing.
We currently have simple state query functions in queries.js. Lets investigate, reselect, which should help us clean up the way we access the state.
Update font styles
The current font choice is small and could be improved by using a better monospaced option.
Update breakpoint styles
The breakpoint style could be improved and the line number needs to be visible
Investigate a demo of debugger.html connecting to Chrome over the Chrome remote debug protocol (RDP). Ā This investigation should also includeĀ best target platforms for delivering the Chrome debugger which may be Chrome itself or alternate platforms such as Electron.
we just added the buttons, but there are some enhancements that would be nice to land:
The node test script currently bundles and transpiles the source for node. It should be possible to avoid bundling the source and instead use babel-register.
This will have a performance win. It will also be easier to debug.
https://github.com/jlongster/debugger.html/issues/57#issuecomment-210608020
User Stories
We are currently using seemless-immutable, but there are benefits to using immutable.js.
Lets weight the pros/cons and make a decision now so that we don't have a bigger refactor later.
I'd like to discuss the merits of adding lodash for debugger.html.
reasons to do it:
arguments against doing it:
chunk = require('lodash/chunk')
only chunk and its dependencies would be added to the build.Path forward:
User Story
As a developer I would like the various JS source files organized by domain and folder such that I can easily navigate the hierarchy to find the files I'm looking for.
User Story
As a user who has paused the debugger I would like a display of the current frames in the call stack such that I can see the chain of events that brought me to the current code as well as jump from this frame to another to view the source code.
Greenkeeper is popular with other major open source projects. I've used greenkeeper my own projects and find it really useful. It takes the work out of tracking package dependencies by auto-monitoring them and bringing them to our attention as needed.
Greenkeeper sits between npm and GitHub, observing all of the modules you depend on. When they get updated, your project gets a pull request with that update. Your CI tests kick in, and Greenkeeper watches them to see whether they pass. If they do, you can just click the merge button, and we'll even auto-close branches for older versions for you. If not, you can use the branch to fix things.
https://greenkeeper.io/#how-it-works
@jlongster is the admin so he will have to enable this if we want it.
Here's an example of what it will do on the first run: clarkbw/debugger.html#1
Currently, the browser test workflow is two steps:
npm run browser-test
If we create a browser test server, similar to debugger server, then the browser test build will be built on the fly and returned.
User Stories
As a web developer whose code has paused in the debugger I need to be able to step into the next statementĀ on the line that is currently paused such that I go deeper into the stack.
As a web developer whose code has paused in the debugger I need to be able to step out of the current scope I'm paused in such that when I discover I'm in the wrong place I can pop back up the stack.
As a web developer whose code has paused in the debugger I need to be able to step over the function calls on the currently paused line such that I don't jump deeper in the stack and continue to the next statement.
Notes
Standard debugger type buttons that trigger their respective action.
Step In
Step Out
Step Over
We want Travis to run tests against every PR however currently it is only running lint tests.
In order to run our unit tests we need the xpcshell binary available on Travis.
There are several ways to possibly accomplish this:
Karma will let us run our tests in different environments (firefox, chrome, node, ...)
For some reason it doesn't scroll right now. Works fine in Firefox. It's probably a simple CSS fix (overflow: auto
somewhere).
It's currently running Firefox 42...
It looks like we can improve that easily though
https://discuss.circleci.com/t/installing-the-latest-version-of-firefox-in-circleci/1347
Steps:
What happens:
The debugger does not detatch.
What should happen:
Debugger should call detatch on unload or something to that effect.
The flag will help with asserts, logging, and other tools that should only run in dev.
Spoke with Helen today, and will do a quick pass on some of our SVG icons
- [ ] make the width / height consistent
- [ ] set fill states (disabled, hover, active)
- [ ] convert stroke widths to paths for pixel snapping
[@helenvholmes Edits]:
User Stories
As a web developer I want to be able to add a breakpoint at a certain line of my code such that I can create points in my application where the debugger will pause.
As a web developer I want to be able to remove breakpoints at certain lines of my code such that I can avoid pausing in areas I no longer need to inspect.
As a web developer I want to be able to see aĀ globalĀ list of breakpoints currently active such that I know how many breakpoints are active and where.
file:line number
User Story
As a developer who is debugging their code I need a breakpoint that only triggers under certain scenarios such that when a certain expression is true my breakpoint will pause execution.
Notes
Chrome Implementation:Ā https://developer.chrome.com/devtools/docs/javascript-debugging/conditional-breakpoint-region.jpg
UX Needs
Investigate and review the various Tree View components available as modules compared to the internal Firefox Tree View module available. Ā This module will be the basis for the Source Code Tree View.
There are three things here:
Logging: we could use DevToolsUtils and wantLogging
Assertions: we could use DevToolsUtils assert and testing
development mode - it might be nice to set this in environment.json
User Story
As a web developer who is stepping through their code I want to see the available variables and current scopes involved in the page such that I can inspect the values of my variables and be aware if any of them are hoisted out of my expected scope.
The breakpoints are neither shown in the editor or breakpoint list
We are currently working on running our unit tests with xpcshell because it would be easier to integrate when we merge the experiment back.
We've made a lot of progress in this effort. We've made it possible to run xpcshell-unit-test from any directory. We've also added additional shams to ff-devtools-libs for running async tests in an xpcshell environment.
In the process, it's becoming clear that our test infrastructure would rely on the xpcshell environment in a similar way as the gecko debugger client relies on browser internal libraries. This conflicts with one the the primary goals of devtools.html, which is to run the client in any browser context and potentially debug any JS environment.
With this in mind, it would be nice to explore running the debugger's unit tests in node. The primary benefit of node, would be that we would be constrained to writing tests that could potentially run in any environment.
This approach would add additional work when it comes time to merge. I see two possible approaches:
One of the side-effects of using node is the lack of xpcshell test runner. If we go with node, we could either use mocha or write a small test runner with similar semantics to xpcshell test. There has been significant interest in using mocha before, so we should consider that option and see if we would be comfortable using mocha post merge.
Lets change the current name "debugger-experiment" to "debugger.html" in all the places it appears
User Story
As a developer who is using minified source code I want to be able to convert the code into a pretty print version such that I can more easily read and understand the code.
Notes
Firefox replaces the current source code with the pretty printed version so an improved interaction like how Chrome creates a new source filed x.js:formatted
isn't in scope just yet.
UX needs
My editor is set to 4-space but we want to conform to the current devtools style which is 2 space
User Stories
As a web developer I want to be able to resume the debugger which has paused at a breakpoint such that I can continue watching the code run.
As a web developer I want to be able to pause the debugger such that I can trigger an action and immediately see what code is run first.
Currently the node + browser test scripts only file test files in a test folder. The script should be able to recursively search for test folders and then add tests files.
There are two problems with the debug buttons when the debugger is not paused:
We broke Storybook yesterday when we added actions to the breakpoint component. Not a big deal, storybook is not on the critical path.
Root cause:
Storybook's webpack config has a babel loader that does not exclude ff-devtools-libs and is causing an issue with Task.async.
Fix:
I'm going to look into a simple upstream fix that will let us write the webpack config that storybook uses.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ššš
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ā¤ļø Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.