Firefox 58 Quantum Developer Tool:How Disalbe in-line Inspenting of Objects?

Developer Tools
#1

I’m using Firefox new 58 Quantum as a developer for 4 month.
It’s not good for some change’s in this version for in-line inspecting / expanding objects in dev-tools.
I used to previous method of inspecting object in new small windows on right.
In old version we could:
1- Compare two object changes by clicking on them
2- Search on object from sidebar search(Filter properties)
3- Copy object attribute content easily by clicking on them and copy.

but now just with inline object showing after i see my object i must close it and open another …that 's silly part.
Also in new version if my object size is big. the developer tools crash. or I can’t browser object easily.

Can we Disable this new feature?

#2

Hello Mostafa, thanks for the feedback.

There’s no way to not have the inline object inspection (and some people are pleased with it), so I’d rather address your concerns.

We do have a replacement for the window on the right (what was called VariableView, and is now named “sidebar”), behind a preference. You can enable it by going to about:config and flipping devtools.webconsole.sidebarToggle to true. Then you can right click on objects and select “open in sidebar”. We are also planning to have a shortcut or a button so it will be more straightforward to do.

It’s a light replacement, and there is no search nor diff flashing.
About the latter, we found the previous behavior (flash the different properties for a short amount of time) quite limited, so we are working on a full object diff viewer (a-la git diff) so it’s more powerful.
Same thing for the search feature. We found it very limited and sometimes plainly broken. We’ll also work to have this back in the sidebar (and also in the inline object). See https://bugzilla.mozilla.org/show_bug.cgi?id=1447175 and https://github.com/devtools-html/devtools-core/issues/803.

A student will work on that this summer as part of GSOC, so it should be better by the end of the year on release.

To copy a property, we have https://github.com/devtools-html/devtools-core/issues/507, and also, the workflow that you mention should work soon once we get keyboard navigation and focus right.
Also, as a sidenote, you can copy whole object or property by using the copy command, e.g. copy(obj1.a.b), that might be helpful.

but now just with inline object showing after i see my object i must close it and open another …that 's silly part.

Why do you need to close objects ? I’d like to understand the workflow here.

Also in new version if my object size is big. the developer tools crash. or I can’t browser object easily.

Would you have an example ? We are working on performance so having real use cases would help us making the console faster.

Thanks !

#3

Hello Nicolas_Chevobbe

We do have a replacement for the window on the right (what was called VariableView, and is now named “sidebar”), behind a preference. You can enable it by going to about:config and flipping devtools.webconsole.sidebarToggle to true

I can’t find any devtools.webconsole.sidebarToggle config value. my firefox version is 58.0(32Bit).

Why do you need to close objects ? I’d like to understand the workflow here

For example, i have 2 object that log by my application. this two objects’s is big and when i open first object i must close it and open next object(cause first one is big and take all of console space), or just scroll down to click on next object,

Would you have an example ? We are working on performance so having real use cases would help us making the console faster

Yes. Check out this JSON. file size is almost 1 MB.some times console crash.

#4

Oh right, it’s in 59, which is now the release version

For example, i have 2 object that log by my application. this two objects’s is big and when i open first object i must close it and open next object(cause first one is big and take all of console space), or just scroll down to click on next object,

I see. So this might get better once we have a handy shortcut to put an object in the sidebar (I think you already cc’ed yourself on that bug :slight_smile: )

Yes. Check out this JSON. file size is almost 1 MB.some times console crash.

How do you get it in the console ? console.log once you get the json from the network ?

Disabling "new frontend" option is not bringing back old frontend
#5

How do you get it in the console ? console.log once you get the json from the network ?

This json code generate by another application(an scrapper coded in python),and i use console.log for viewing it.

#6

okay. And when you say “crash” what happens ? And when does it happen ? When you interact with the object or simply when you log the object ?

#7

Also, can you please share with us your “crash” link from the page
“about:crashes” ?

Thanks :slight_smile:

#8

okay. And when you say “crash” what happens ?

it’s not a crash that page completely stooped? console just not response for 10 to 20 second and then every things is OK.

When you interact with the object or simply when you log the object

Just when log the object by pasting code on console. or user console.log(JSON_PASTED_DATE);
I think just some times this happen, when my json object is big.

@julienw
Hi

Also, can you please share with us your “crash” link from the page
“about:crashes” ?

This page is empty.

#9

Hello @mostafa, I tried to reproduce with the JSON you gave me in a glitch app : https://devtools-huge-json-slowness.glitch.me/

if you open the console, and then click the buttonm do you the slowness you talked about ?
For me it’s quite fast, even on release (59), but maybe it’s just my hardware.

#10

Thank you thank you thank you sir. I have been searching all morning; I knew I couldn’t be the first person who ever encountered this problem. Personally I don’t like the change (why have one click when two clicks will do!) and it voids my warranty (sigh). But Huzzah!

On a side note, the doc here is wrong, (which I will complain about presently); had that been correct you might not have gotten the save : )