[meta] Create an Interactive Console for debugging web pages

RESOLVED FIXED

Status

defect
RESOLVED FIXED
10 years ago
6 months ago

People

(Reporter: rcampbell, Unassigned)

Tracking

(Depends on 3 bugs, {meta})

Firefox Tracking Flags

(Not tracked)

Details

()

Reporter

Description

10 years ago
[this is a meta bug]

Create an interactive Console to help web developers understand everything that happens during the creation of a web-page. Console entries will be time-stamped objects representing errors, network traffic, javascript events, DOM/HTML mutation and logging output. The Console will also have an interactive command line for evaluating javascript against the current webpage and an interactive Workspace window for entering and evaluating larger blocks of code.

For web-developers, the Console should include a logging API and a richer interactive environment for executing live javascript against the active webpage.

The Console should fully-replace the existing Error Console window.

Comment 1

10 years ago
I would love to have a console that steals ideas from iPython and zsh. Dolske and I talk about this sometimes, his version of this would be called "Mosh" and would also allow access to the OS filesystem:)
Reporter

Comment 2

10 years ago
I don't think we want to create a full-featured OS shell for this version. It's pretty-specifically going to be targeted at helping web-developers see what's happening as their page gets constructed and for interacting with content. We do want to have some basic-command-line features though, and the ability to dump logs to disk. Hopefully, this'll be a good platform to base some extensions off of though and iPythonish or zsh-style features would be cool.
-> To shiny new developer tools component!
Component: General → Developer Tools
QA Contact: general → developer.tools

Comment 4

9 years ago
I have a little suggestion which is to add a support for typed errors in JavaScript. Indeed, JavaScript programmers can throw error. One of the interesting thing that can be done is throwing typed errors either native (TypeError, RangeError...) or user-defined errors.

Currently, an uncaught JS-thrown error triggers the user-defined message of the error object, the file/line number of the throw statement and the error sign to be displayed. In Opera, for instance, the error type is displayed in the console. 

Displaying this information would encourage developers to use throw and try/catch.

Thanks

Comment 5

9 years ago
Was there a user repo with some code in it for this bug? Or am I mistaken?
http://hg.mozilla.org/users/rcampbell_mozilla.com/hud/ has work through december of last year, anyhow.

Comment 7

9 years ago
Is the plan to continue working on the console as an extension, or can we create a toolkit or browser component? i for one would like to all of this coding in TDD style - or can we use xpcshell tests, etc in an extension?

Comment 8

9 years ago
Was just running hud in Minefield and it slowed my browser down to a crawl after about 30 minutes/ hour. At first it felt like network latency, then it became clear that the UI was becoming molasses.

It might also be user error, I was trying to view the logging pane on more than one tab, maybe 3 tabs. also ended up with a detached console, and was able to have 2 of them open. is the console a singleton?

Updated

9 years ago
Depends on: 545266

Comment 9

9 years ago
Continuing some thoughts in this meta bug, I am thinking it might be handy to log all of the data to SQLite for later querying or reconstruction of pages, what do you think?

Of course we should keep the "current" logging data cached in memory to keep latency low.
Reporter

Comment 10

9 years ago
this was really just proof-of-concept code to demo at the science fair. The guts of the extension will need to be rewritten. Especially the hud-service component. Right now, it's not purging anything and storing everything in an array. Not ideal in a threaded environment. We also need to have a mechanism to limit the amount of data this thing stores.

Logging to SQLite has some advantages for storage, but I'm not sure we want to keep those things lying around in profile directories. They could balloon pretty heavily without a user's knowledge. I'd also be worried about performance.

Alternatively, we could use flat files, but they're a bit ugly. In either case, I think we'll need to do some cleanup on browser shutdown.
Reporter

Comment 11

9 years ago
oh, re: comment #7, I think ultimately this should probably live in toolkit.
Reporter

Updated

9 years ago
Depends on: 534398
Reporter

Updated

9 years ago
Depends on: 453650
Sorry for my ignorance... I was just poking around the toolkit/console dir and some things came to mind.

Will be using nsIConsoleService with this new console? I assumed we were writing everything from scratch in JS. Which is awesome.
per conversations with Mossop and robcee:

best approach may be to wrap nsIConsoleMessage and nsIConsole similar to the toolkit/console front end, the difference of course is taking into account the tab the message originated from and the "headsup" ui concept for each tab.

Updated

9 years ago
Depends on: 546708
for the front end my thinking is that I need to:

1. create a pref that turns the Heads Up Display on or off
 a. initialize the HUDService when toggled on
 b. create HeadsUpDisplay console for each open tab

2. add an event listener for "TabOpen" to create a HeadsUpDisplay console when tabs are created

3. cleanup routine to remove consoles and shutdown the service when toggled off

4. UI element to do the toggling

5. UI element per tab for show/hide heads up display??
Also, I was thinking we should create a new browser component like:

browser/components/devtools

and then browser/components/devtools/inspector
         browser/components/devtools/hud

does that make sense?
Reporter

Comment 16

9 years ago
(In reply to comment #15)
> Also, I was thinking we should create a new browser component like:
> 
> browser/components/devtools
> 
> and then browser/components/devtools/inspector
>          browser/components/devtools/hud
> 
> does that make sense?

that might be over-compartmentalizing. No need to create a separate subdir for just two pieces. Also, I don't think I'll need a component for inspector.
Reporter

Comment 17

9 years ago
(In reply to comment #14)
> for the front end my thinking is that I need to:
> 
> 1. create a pref that turns the Heads Up Display on or off
>  a. initialize the HUDService when toggled on
>  b. create HeadsUpDisplay console for each open tab
> 
> 2. add an event listener for "TabOpen" to create a HeadsUpDisplay console when
> tabs are created
> 
> 3. cleanup routine to remove consoles and shutdown the service when toggled off

you might need another cleanup routine (and a settable pref) to scavenge max entries per hud. Something sufficiently large like, say 10,000 entries or more.

> 4. UI element to do the toggling

and hotkey! Cmd-; ? ;)

> 5. UI element per tab for show/hide heads up display??

I think one toolbar button is probably all the UI we'll need and most people probably won't even use that in favor of the hotkey.

otherwise, all sounds good!

Updated

9 years ago
Depends on: 551056
Spent a great deal of time in gdb and talking to both mrbkap and sicking about a possible bug in cloned xbl nodes. 

I am cloning a set of nodes to create each HeadsUpDisplay. I am going to just programmatically create all of the nodes to see it that fixes the issue.
After spending all evening on this, unless we can figure out out how to actually load "about:hud" into a dynamically created iframe node, we may have to go with a xul node for the output. Not really a big deal. we can just wrote an API for skinning it and whatnot. Perhaps a timer that runs and checks to make sure the right uri is loaded before completing construction? I am still not sure if that will even work at that point.
Attempted to create a user repo, but my Lab's commit access does not seem to grant me user repo access. I'll keep the patches up to date all of the time and build some try builds every week.
The current console patches are found on bug 545266 and bug 546708 - also try builds will start once things are actually usable - I hope end of next week. It turns out that trying to attach (and keep attached) an arbitrary object on a nsIDOMWindow is a it of a pain - from outside the window's constructor. sicking told me about his patch for detecting new windows (before content scripts run) and attaching objects to them: bug 549539 - which landed late today. Yay. With this patch on trunk it should be trivial now to detect window construction and attach a console.

Updated

9 years ago
Depends on: 552140

Updated

9 years ago
Depends on: 552143

Updated

9 years ago
Depends on: 552144

Updated

9 years ago
Whiteboard: [patches in bug 534398]

Updated

9 years ago
Depends on: 555123

Updated

9 years ago
Depends on: consoleui

Updated

9 years ago
Depends on: 559482

Updated

9 years ago
Depends on: 559748

Updated

9 years ago
Depends on: js::dbg2

Updated

9 years ago
Depends on: 553146

Updated

9 years ago
Depends on: 554937

Updated

9 years ago
Depends on: 561179

Updated

9 years ago
Depends on: 561458

Updated

9 years ago
Depends on: 567165

Updated

9 years ago
Depends on: 228205

Updated

9 years ago
Depends on: lazy-console

Updated

9 years ago
Depends on: 568647

Updated

9 years ago
Depends on: 568649

Updated

9 years ago
Depends on: 568652

Updated

9 years ago
Depends on: 568656

Updated

9 years ago
Depends on: 568665

Updated

9 years ago
Depends on: 568667

Updated

9 years ago
Depends on: 570543

Updated

9 years ago
Depends on: 571045

Updated

9 years ago
Depends on: 572812

Updated

9 years ago
Depends on: 572953

Updated

9 years ago
Depends on: 573059

Updated

9 years ago
Depends on: 573103

Updated

9 years ago
Depends on: 573845

Updated

9 years ago
Depends on: 574015

Updated

9 years ago
Depends on: 574103

Updated

9 years ago
Depends on: 574137

Updated

9 years ago
Depends on: 574266

Updated

9 years ago
Depends on: 574452

Updated

9 years ago
Depends on: 574235

Updated

9 years ago
Depends on: 574036

Updated

9 years ago
Depends on: 574023
Looks like the web timing spec has the start of an implementation in Gecko: bug 570341

Updated

9 years ago
Depends on: 576520

Updated

9 years ago
Depends on: 576523

Updated

9 years ago
Depends on: 576639

Updated

9 years ago
Depends on: 576642

Updated

9 years ago
Depends on: 577722

Updated

9 years ago
Depends on: 577721

Updated

9 years ago
Depends on: 578353
Depends on: 578437
Depends on: 578462
Depends on: 578658

Updated

9 years ago
Depends on: 578946

Updated

9 years ago
Depends on: 574628

Updated

9 years ago
Depends on: 574127

Updated

9 years ago
No longer depends on: 554937
Depends on: 579913

Updated

9 years ago
Depends on: 579954
Depends on: 579975

Updated

9 years ago
Depends on: 580016
Depends on: 580030

Updated

9 years ago
Depends on: 580166

Updated

9 years ago
Whiteboard: [patches in bug 534398]
All patches are landing on trunk now for inclusion in Fx 4 betas

Updated

9 years ago
blocking2.0: --- → ?

Updated

9 years ago
blocking2.0: ? → ---

Updated

9 years ago
Depends on: 580352

Updated

9 years ago
Depends on: 581459
Depends on: 582201

Updated

9 years ago
Depends on: 568034

Updated

9 years ago
Depends on: 583101

Updated

9 years ago
Depends on: 583107
Depends on: 583464
Depends on: 583476

Updated

9 years ago
Whiteboard: [kd4b5]
Depends on: 584672

Updated

9 years ago
Depends on: 584775

Updated

9 years ago
Depends on: 585552

Updated

9 years ago
Depends on: 585553

Updated

9 years ago
Depends on: 585583

Updated

9 years ago
Depends on: 585232

Updated

9 years ago
No longer depends on: 585232
Depends on: 585985
Depends on: 585991

Updated

9 years ago
Depends on: 586226
Depends on: 586386

Updated

9 years ago
Depends on: 587573

Updated

9 years ago
Depends on: 587574
Depends on: 587615
Depends on: 587617
Depends on: 587625

Updated

9 years ago
Depends on: 587734

Updated

9 years ago
Depends on: 588010

Updated

9 years ago
Depends on: 588014

Updated

9 years ago
Whiteboard: [kd4b5]

Updated

9 years ago
Depends on: 588345

Updated

9 years ago
Depends on: 588533

Updated

9 years ago
Depends on: 588540

Updated

9 years ago
Depends on: 588585

Updated

9 years ago
Depends on: 588642

Updated

9 years ago
Depends on: 588730
Depends on: 588791

Updated

9 years ago
Depends on: 588871

Updated

9 years ago
Depends on: 589089

Updated

9 years ago
No longer depends on: 588010

Updated

9 years ago
Depends on: 591130

Updated

9 years ago
Depends on: 591384

Updated

9 years ago
Depends on: 591509

Updated

9 years ago
Depends on: 591562

Updated

9 years ago
Depends on: 591937

Updated

9 years ago
Depends on: 592110

Updated

9 years ago
Depends on: 592149

Updated

9 years ago
Depends on: 592222

Updated

9 years ago
Depends on: 586249

Updated

9 years ago
Depends on: 592264

Updated

9 years ago
Depends on: 588657

Updated

9 years ago
Depends on: 592410

Updated

9 years ago
Depends on: 592442

Updated

9 years ago
Depends on: 592879

Updated

9 years ago
Depends on: 593003

Updated

9 years ago
Depends on: 593204

Updated

9 years ago
Summary: Create an Interactive Console for debugging web pages → [meta] Create an Interactive Console for debugging web pages

Updated

9 years ago
Depends on: 593540
Depends on: 589162
Depends on: 592549
Depends on: 594523
Depends on: 595195

Updated

9 years ago
Depends on: 595223

Updated

9 years ago
Depends on: 595889

Updated

9 years ago
Depends on: 596080

Updated

9 years ago
Depends on: 596299
Depends on: 597103
Depends on: 597136
Depends on: 597139
Depends on: 597148
Depends on: 597150
Depends on: 597151
Depends on: 597200
Depends on: 595200
Depends on: 598438
Depends on: 597460

Updated

9 years ago
Depends on: 600095
Depends on: 600183

Updated

9 years ago
Depends on: 601353
Depends on: 602572
Depends on: 602970
Depends on: 603176
Depends on: 603706
Depends on: 603711
Depends on: 603714
Depends on: 603720
Depends on: 603723
Depends on: 603727
Depends on: 603730
Depends on: 603732
Depends on: 603750
Depends on: 603251
Depends on: 605241
Depends on: 606498
Depends on: 607325
No longer depends on: 578353
Depends on: 580618
Depends on: 613013
Component: Developer Tools → Developer Tools: Console
QA Contact: developer.tools → developer.tools.console
This bug is fixed for all practical purposes. Please reopen if you believe otherwise.

We have a Web Console for web pages, a debugger and soon a Global Console that could replace the Error Console.
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED

Updated

11 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.