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)

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.