Bunch of ideas to improve the devtools

improvements.md

(of course, the dev tools are insanely awesome, but everything has its quirks).

Console

> { a: 4 }
4
> { a: 4, b: 5 }
SyntaxError
// why not figure out it's an object literal, auto-wrap in parentheses?

// start writing something...
> 2 + 2
// realise you want to pass it to a function! wrap in parens, hit Home, start typing
> reallyLong(2)
// no auto-completion, life is terrible.

> var foo =
SyntaxError: Unexpected token }
// wtf, that error doesn't make much sense. what }? I don't see any }
// I understand it because I know what's going on behind the scenes:
with (...) {
    var foo =
}
// but most people are very confused, especially newcomers

> keys = Object.keys(obj)
> keys
function keys(object) { [Command Line API] }
// not overridden because of the aforementioned with statement. horrendously
//annoying, especially to newcomers

> var log = console.log;
> log('hai')
TypeError: Illegal invocation
// log needs to have window.console as its this value. this leads to tons of confusion (just check
//StackOverflow) and to an ugly workaround:
> var sadLog = console.log.bind(console)

> function foo () {
SyntaxError
// but...any REPL figures out you just hit Enter out of convenience, and lets
//you type on, remembering input until the function definition ends.

> $$('blah').map(...)
TypeError: $$(...).map is not a function
// you probably use $$ to get a bunch of nodes, and do stuff on them. NodeLists 
//are near useless; convert the retvalue to an array. (@benjamingr)

• Currently, filtering only allows you to see a specific type of messages (say, Warnings or Errors), but can't let you ignore them (I don't want to see Warnings).
• While on that, the ability to filter errors by type would be great. While debugging your js, you usually don't care about image 404s. (@benjamingr)

Elements

• Button to toggle visibility of sidepanel, like we have in Sources. (@awalGarg)
• Changing the style of injected stylesheets apparently doesn't work too well. (@rlemon)

Network

• Why can't you edit and replay requests? You can replay XHR requests, but that's about it, no edit.
• Why doesn't Search also search the request/response contents?
• Or while on that, why can't we dump all the traffic?
• Or while on that, why isn't there a console API to let us catch and break on interesting requests/responses, similar to what ServiceWorkers can do but more manly? (okay, this one isn't "small" or "easy", but it's awesome)
• Inspecting WebSockets is a pain - frames don't refresh automagically (or even periodically), each frame is a tiny block of plaintext which is very difficult to copy. (@rlemon)
• Already solved. Awesomeness!

Sources

• No auto-beautify on, makes breakpoints disappear and kittens to be sad
• After beautifying, Search All also searches in unbeautified sources (shouldn't need to, methinks; same treatment as source mapped files).
• Ctrl+Shift+P looks exactly like Ctrl+P, but doesn't give the same results; prefix like with Ctrl+G?

Resources

• Why can you edit localStorage data but not Cookies?
• It'd be awesome to right-click a resource found under Frames and open it in Sources. (@awalGarg)

Emulation

• Why is the UI for changing the model/resolution/etc both in the Emulation tab, and on the top? (@benjamingr)

Oh nice!

After beautifying, Search All also searches in unbeautified sources (shouldn't need to, methinks; same treatment as source mapped files).

You can do that, open the secondary tabs (click on the console icon), go to search and type whatever you wanna search - can even feed it a regex. Although definitely discoverability could be better.

Some ideas

• A really nice feature for me would be being able to replay a page including network requests on a timeline, this does sound like a lot of work but it'd make life insanely more helpful.
• Also, the promised promise instrumentation would be cool to finally get.
• Hooks for frameworks into the devtools through an API would be super awesome (like, if Angular could let you 'break on digest', or jQuery on 'data changed for class name' or bluebird would let you 'break on unhandled rejection' out of the box).
• $$ is there for convenience, it'd be nice if it'd just return an array since that's what you actually want when you use it rather than a NodeList.
• Adding Googlebot to the useragents by default to see how google would see your site would be really nice.
• Emulation being both on bottom of dev tools and in the top (being able to select device in two places) is kind of silly.
• Being able to remove net::ERR_BLOCKED_BY_CLIENT caused by extensions (or filter out console logs by extensions completely) would be a really nice feature.

Explicitly allow adding inspector stylesheets like firefox.
Map from sourcemaps before script execution.
Seeing resources from... resources tab is more easier in the Frames folder. So add prettification there too.
Separate console for content scripts.
Allow hiding the sidebar in DOM Inspector.

• Emulation would be nicer if it didn't require a refresh (not always, but a lot of the time).
• can't edit injected styles in the style pane.
• inspecting larger websocket frames is super ugly and I often just copy it into an editor. a prettier version of this would be nice (if it doesn't exist)
• bring back Goats.

It'd be awesome to right-click a resource found under Frames and open it in Sources.

FTR, right click in resources -> open in network -> right click in network -> open in sources

can ofcourse user-scriptify this but... meh.