Dbux is an Integrated Debugging Environment (IDbE) and Omniscient Debugger that makes JavaScript application's run-time behavior come alive, visible and interactive.
Home Page: https://domiii.github.io/dbux
License: Apache License 2.0
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
NOTE: You can test BackendAuth.login via the Dbux: Backend Login command.
add:
async loginWithGoogleAccessToken(accessToken) {
const cred = firebase.auth.GoogleAuthProvider.credential(googleAccessToken);
return await firebase.auth().signInWithCredential(cred);
}implement BackendAuth.login()
googleAccessToken already present, and if so, try to loginWithGoogleAccessToken with that token:
await loginWithGoogleAccessToken(googleAccessToken)this.loginWithLocalServer() (see below)await loginWithGoogleAccessToken(googleAccessToken)
throw new Errorawait firestore.set('test', {x : 1});implement BackendAuth.loginWithLocalServer (allow user to login via Google):
yarn add servenpx serve ${pathToLoginHtml} --port ${somePort}login.html, inside of login.html:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/socket.io.js"></script> to <head>
io is globally available.accessToken
accessToken back to the local http server
dbux-runtime/src/client/Client.js -> _connect() for reference on how to connect to a serverenv.openExternal(Uri.parse(http://localhost:${somePort}`))` for thisBugNode.showWebsite for referencelogin.html sends back data
window.withProgress and allow user to cancel while waiting
withProgress and it's API as externalgoogleAccessToken in mementoThis issue is to allow for collecting initial feedback regarding more complex data analysis methods and tools to be used on Dbux data.
WARNING: This issue is only to collect well-thought-out and researched commentary. If you want to discuss or ask questions, please bring them to the Dbux Discord.
As a general hint, you probably want to get started with this task by looking at our two data-related folders:
TODO: hint system for dbux-practice that can help guide learners through some more difficult debugging steps.
Has been brought up here.
We want to move all long-running processes (git clone, npm install etc) to TerminalWrapper.
Basically a reversal of #133, but with an added button.
Automatic opening can quickly become annoying :P
staticTraces in dbux-babel-plugin/src/visitors/awaitVisitor.js.resolveCallIdsTraceType.{Await,Resume} ContextNodes in Call Graph (broken loc and undefined displayName). We want to link them against their realContext.traceDetailsView features might be bugged (not tested recently)Overall it does not even seem entirely broken, but a lot more testing is needed:
NOTE: This issue only covers basic await support. The Async Call Graph feature is tracked in #210.
UI Steps:
traceId (if is number) or displayName (if not is number)E.g. in
function f(a, b, c) { ... }We want to trace and step through a, b and c (probably after PushImmediate).
Let the logError listener in VSCode open the output channel, so the user has a way of understanding what is actually going on.
When trying to get patch string in non-existing folder will cause error.
The button is added in #160
To solve:
NOTE: The following goes for the two SocketServers that we are running:
initRuntimeServer)TerminalSocketServerMake sure, the servers don't start unless necessary:
runCommands.js -> runFile function is calledlogError properly, and also explain to the user why that might be the case (i.e. it might be because another instance of VSCode has already started such server)ExtensionContext (must have dispose method), so it will shut down when extension deactivatesTerminalServer should only run while Terminal is open and also _dbux_run.js has not finished yetIt takes a while to install dependencies, but only in production mode.
yarn run code:install:prodCurrently, there is no easy way to visit all traces in order by id, and "{Next,Previous}InContext" ignores ExpressionValue, which makes sense and keeps things nice and easy. However, sometimes we do want to go through all traces, and/or easily select values.
Icons maybe just ← and →?
When new versions are published, dbux-projects might bug out due to changes in assets, especially in _dbux_run.js.
Idea:
ContextGroupNode: multiple contexts (realContext) of same parentTraceIdRecursionGroupNode: multiple staticContext of same staticContextId repeated in a single CGR
next in express)LoopNode for loops)Dbux: System Check to userCommands.js.checkSystem.js in dbux-projects (because it does not depend on VSCode).codeModal (one line per tool)Check if all dependent OS tools are available:
which returns a unix-style path, which needs further lookup via cygpath -w.
where instead of whichdbux-projects\src\util\which.jswhich() from which.js instead of Process.execCapture...(which...)
hasWhich
where to be available on Windows (available from Windows 7 and Windows Server 2003 onward), and which to be available on any other system. If you are on Windows, please refer to: https://superuser.com/questions/49104/how-do-i-find-the-location-of-an-executable-in-windows"Use memento to remember if the command has passed all checks before. If not, call on start-up.
Need to wrap onDidChangeTextDocument event handler.
When clicking on a bug, open a TextEditor, showing a bug's introduction
html template for this.Allow user to store their bug solutions locally:
TestRun
projectId + bugIdcreatedAtnFailedTests number of tests failed (statusCode)timer time spent (or null, if no timer was used)patch string containing complete patch contents, obtained via Project.getPatchStringBugProgress
projectId + bugId (combined PrimaryKey)createdAt + updatedAtstopwatchEnabled + timePassedstatus (BugStatus = new Enum({ None: 1, Solving: 2, Attempted: 3, Solved: 4 }))id and uid columns to these data-structures when moving it onlineComplete "PracticeSession" concept
codeModals.js -> showInformationMessage)
PracticeStopwatch.js)TestRun object in ProgressLogstatusCode obtained from the terminal is actually the number of failed tests. Show that result to the user. If testCommand executed and no test failed:
updateOrCreate corresponding BugStatus with status = BugStatus.SolvedBugRunner so it is no longer active. Maybe we can just call cancel?sessionId In ProjectView, show bugs where status == BugStatus.Solved with a checkmark icon
When ProjectView is visible for the first time, load ProgressLog from Memento and render previous progress in UI
Allow user to switch between bugs without any problems
gitResetHard when git diff result is not empty.BugRunner.getActiveBug), store TestRun with nFailedTests = -1 (marking an attempt, but without test run)
Project.getTagName)bugId from looking it up in the getOrLoadBugs array by tag nameTestRun (with patch!)gitResetHardTestRuns, choose the latest TestRun and apply that patch
Project.applyPatchString in order to apply a patch from string (rather than file)code -d <file1> <file2>? -> might not be sufficient since there are multiple files and it cannot diff entire directories this way?) Make sure, dbux-practice view is refreshed even if activateBug failed
It seems like we send out an update after disposal again :D
Two errors are reported in dbux-graph-client in Webview.
Stacktrace:
[DBUX [Highlighter]] Component update failed TypeError: Cannot read property 'classList' of null
at Highlighter.update (Highlighter.js?65ea:16)
at Highlighter._performUpdate (ClientComponentEndpoint.js?b2ab:83)
at Highlighter.updateClient (ClientComponentEndpoint.js?b2ab:121)
at Ipc._processRequest (Ipc.js?bb0f:162)
at Ipc.2 (Ipc.js?bb0f:254)
at Ipc._handleMessage (Ipc.js?bb0f:234)
at messageHandler (index.html:32)
[DBUX [ContextNode]] Component update failed TypeError: Cannot set property 'id' of null
at ContextNode.update (ContextNode.js?d8c9:67)
at ContextNode._performUpdate (ClientComponentEndpoint.js?b2ab:83)
at ContextNode.updateClient (ClientComponentEndpoint.js?b2ab:121)
at Ipc._processRequest (Ipc.js?bb0f:162)
at Ipc.2 (Ipc.js?bb0f:254)
at Ipc._handleMessage (Ipc.js?bb0f:234)
at messageHandler (index.html:32)
In applyNewBugPatch, applying the patch might fail for a variety of reasons.
We want to make sure that even when patch cannot be applied, user can do their thing.
If previous user patch failed to apply:
codeModals.js is our customized showWarningMessage which allows to show a warning message with action buttonsexternalsOne great value of the traditional debugger is to see the value of variables in context in one table. Useful feature to have.
Dbux currently does not quite comprehend "variables", as we deal in traces and have not analyzed the role of individual variables yet - but at least we can show expression values of nearby expressions?
For now, we can:
selectedTracenode's label = staticTrace label and node's description = traceValueLabelThe screenshot shows how VSCode is now grouping by block, but I think that just makes things more confusing.
We can just group by context, makes things more intuitive to my mind. (I think that is how they used to do it, too.)
Thoughts?
The button should render the current RuntimeServer state (e.g. a "router" icon in green/red).
When clicked start/stop the server.
Also see: #135
dbux.run and dbux.debug
enable-source-maps: toggle --enable-source-maps for run and debug (since it can be super slow)dbuxArgs: custom dbux run command options (see buildCommonCommandOptions)nodeArgs: Allow configuring node argumentsprogramArgs: Allow configuring program arguments, available via process.argvenv: Allow configuring program env, available via process.envTalk to me first, if you have little to no experience in configuring CLI commands :)
Dito.
Bugs from some projects (e.g. todomvc) are of our own design, and we have saved them as patch files. However, that defeats many of the assumptions we have when running certain git commands (such as git reset --hard).
eslint setupinstall, commit all patch files to "local tags"
Deploy packages to npm, and the extension to the VSCode Marketplace.
lerna bootstrap bug: lerna/lerna#2539dbux-code's required assets + dependencies into the resources/dist folderresources and assets folders)..vscodeignore, .npmignore, package.json filesvsce publishvsix fileextensions folder (especially projects/)package.json files. Easily allow version bumping.Potential Future Work
lerna to rush?
Unhandled Rejection is reported when quickly selecting + deselecting nodes in ApplicationView.
In BugRunner.activateBug, we use await this._queue.enqueue but when any task fails, it skips right to the next. Make sure to clear the queue, if a task in it failed instead.
Tested with calls1.js:
Cannot navigate into the getter call behind a['i'] or other getters.
NOTE: Getters and setters generate new contexts and function calls, but there are no CallExpression and no BCE associated with them.
NOTE2: We could insert a CallResultExpression after the fact, but we cannot guarantee for it to exist (e.g. when they throw Errors).
As mentioned in the README, observer effect can easily occur when Dbux tries to gather values from properties with side effects. We want to avoid that.
WARNING: This issue is only to collect well-thought-out and researched commentary. If you want to discuss or ask questions, please bring them to the Dbux Discord.
Just like ESLint configuration comments (// eslint-disable etc), Dbux should allow developers to turn off gathering data from specifically marked properties, or disable tracing on specific lines of code using directive comments.
calls0.js
Thank you @MiccWan for keeping at it :D <3
Error message:
Element with id ....1 is already registered
try block does not get detected correctly.finally block will be flagged as error trace (incorrectly).error4.js: error trace flagged incorrectly - should be todos (before todos.x) but is on = trace instead.
error2.js - 
previousTraceInContext of PopImmediate does not work with try-catch casesWe are currently only resolving errors from PopImmediate in DataProvider.resolveErrorTraces. Currently, only traces that are PopImmediate and also !isTraceFunctionExit are error traces.
TraceTypes:
TraceType.TryBlockExitTraceType.CatchTraceType.FinallyDataProvider.resolveErrorTraces
Trace.previousTrace (it seems to be inaccurate?)
previousTrace = getPreviousInContext() instead?getReturnTraceOfRealContext check (it's more complicated than that)previousTrace if...:
trace is Pop and !isTraceReturn(previousTrace) and !isTraceFunctionExit(previousTrace)
error-try-return-finally.js and error3.jstrace is TraceType.Catch
trace is TraceType.Finally and previousTrace is in try block and not TraceType.TryExit and !isTraceReturn(previousTrace) and !isTraceFunctionExit(previousTrace)
E.g.: ++i in log(++i) does not have a callId.
Ratioinale: Important commands better have a button :D
We currently call graphRoot.refresh on allApplications.selection.onApplicationsChanged in GraphDocument. However that causes race conditions when refreshing too fast because client-side nodes might get disposed while we are still adding them asynchronously. We want to prevent that.
Also, allApplications.addApplication might remove an old and add a new application in one go, thereby emiting applicationsChanged refreshing twice. It should tell the remove method not to emit the event instead (maybe add a silent parameter).
ApplicationView without errorsSometimes caller trace cannot be found.
Are callId or resultCallerId not set?
How to reproduce?
https://github.com/Domiii/dbux/blob/dev/dbux-data/src/dataProviderUtil.js#L393
Variants of the Actor Model (often in form of the Entity Component System (or "Paradigm") (ECS)) is commonly used in game development.
The Actor Model centers around agents, which themselves are objects, and also "individual threads of execution". Agent state can only be modified by the agent itself by calling methods on each agent. Execution of methods is atomic in regard to the agent's own state, no two different methods can be running at the same time.
The ECS (commonly seen in games, and arguably made most popular through the Unity (and other) game engine(s)) shares the idea of agents (also called "Entities" or "GameObjects") managing their own state, but with less constraints and assurances (especially: no atomicity or isolated state!). However, viewing Entities (or GameObjects) in ECS game engines as "Actors" in the Actor Model might largely aid us in debugging their run-time.
dbux-projects
FlowMode.AgentModel with only selected set of agents (i.e. those agents/entities/objects we want to investigate) as the parameterWhen in that mode...
FlowMode.AgentModel without parameter -> Track all object executions?Clean up our babel setup, make sure, we don't see asyncGenerator anymore. It just should not be necessary anymore and makes debugging a pain.
TODO
[dbux-code] [Unhandled Rejection] reason: Error: [ContextNode] Trying to dispose before initialized, promise: [object Promise]
We automatically open the CallGraph upon startup in: https://github.com/Domiii/dbux/blob/c1d95d7/dbux-code/src/index.js#L84
Instead:
handleDidChangeViewState, save the Call Graph's ViewColumn location to memento (or null if not visible)NOTE: the detailed logic should probably be located in GraphWebview.js, not in index.js
Process.js support getting err, out and code.Promise.race to get result or canceled.cmd? Ubuntu on Windows?)We currently allow users to run dbux on arbitrary files, using the "dbux-run" launch config and its friends. That is not available to the deployed extension, so we need to migrate it to something more accessible.
uncaughtException does not really allow us to ensure data being sent out before the program halts.
process.exitNOTE: In general, process termination cannot be gracefully handled from within a process (at least not cross-platform). Thus, we need to monitor it externally, either from dbux-code, @dbux/cli, and/or some other meta/monitoring process.
I briefly started experimenting in dbux-runtime/src/index.js , but did not get very far yet.
forcedShutdownDelay argument to the run command in dbux-cli/src/commands/run.js's builder object?
process.exit is called (e.g. by underlying framework), in which case we won't get any data.process.exit and add process.on('uncaughtException', ...) and unhandledRejectionprocess.exit can be overridden
const ex = process.exit.bind(process);
process.exit = (...args) => {
console.error(2);
setTimeout(() => ex(...args), 1000);
};
process.exit(1);
console.log(1);process.exit will not have the expected effect, which might (and probably will) introduce bugs in all kinds of programs, likely causing an abnormal exit anyway.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
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.