Updates to DevTools in Chrome 62 (opens in new tab)

(developers.google.com)

95 pointsnickwanninger8y ago39 comments

39 comments

wluu8y ago

I actually prefer the Firefox dev tools these days. One thing that I really like is the edit and resend functionality[0]. Quite useful when quickly testing API calls. I know you can use other tools in Chrome to do the same, but I like that it’s built in. Good to see improvements in the Chrome dev tools nonetheless!

[0] https://developer.mozilla.org/en-US/docs/Tools/Network_Monit...

alt25018y ago

I like Firefox too, but chrome still displays JSON objects in the console very nicely. I haven't found a good way to do this in FF yet. Do you know of a way?

samtoday8y ago

If it is a GET request, just open it in a new tab. Firefox has a built-in json viewer (no extensions required).

Eg. open this in a new tab: http://httpbin.org/get

dzhiurgis8y ago

IDK man, afaik there's no way to prettify API responses in a Response tab.

joshribakoff8y ago

Cool but I really wish they'd add more keyboard shortcuts. Like ability to use arrows and keyboard to select a network request and replay it. Or to drill down a deeply nested json without having to make a series of precise mouse clicks

zspitzer8y ago

They still haven't reverted the dropdown filtering UI for the console, the old style quick access toolbar, like the network panel. It used to be really useful, yet since the change, I barely use it anymore.

There's a long thread about it here, but the chrome developers haven't really engaged with the community feedback

https://groups.google.com/forum/#!topic/google-chrome-develo...

The dev tools console has also become a dumping ground for repeated browser warnings and the option to turn them off isn't even persistent.

indigo00868y ago

Yup, worst decision ever. I’ve been using Firefox but performance drastically drops when debugging so I go back to using chrome. I just prefix my logging and filter.

zspitzer8y ago

I filed a bug about that too, feel free to vote for it :) https://bugzilla.mozilla.org/show_bug.cgi?id=1389864

dzhiurgis8y ago

Hey fellow HN'ers, I recently discovered you can select source in this (windows) terminal-like fashion by holding alt (i.e. https://imgur.com/a/XnCSd).

Does anyone know what is the purpose of this feature? I always disliked how difficult is to select something on windows cmd, this seems like anti-feature for me, but obviously I am missing something.

noway4218y ago

many text editors have that feature, while might be not that widely used or useful, it's still ported and implemented in many of them

mavidser8y ago

I've seen people use the same shortcut in sublime text to copy small code blocks (without copying the indentation).

rasz8y ago

column mode, very useful

nofilter8y ago

I see myself using the Block-level code coverage quite often.

styfle8y ago

Could be used to generate automated code coverage in headless mode?

nofilter8y ago

Ah, didn't even think of that, would be awesome!

petval8y ago

I continuously struggle with debugging aspx with embedded JavaScript. Breakpoints can't be set on any line and I still haven't figured out the logic why and when stepping through the highlighted line is never the one that is actually running. Even after expanding the code with the { } button. It's just simple JS so no code maps should be needed.

bennettfeely8y ago

Starting to think maybe it would be good to have a "DevTools" lite, now that there are literally dozens of tabs and pages. Is there a shortcut to just bring up the console?

ehsankia8y ago

ctrl+shift+j goes directly to console.

I believe ctrl+shift+i goes to whatever tab you were at last, and ctrl+shift+c goes to the element tab and enables the element selector.

I don't know if there's any other shortcuts but these are the one I use most often. You can also drag the various tabs to order them the way you like.

kaycebasques8y ago

Correct, Control+Shift+J (Windows, Linux) or Command+Option+J (Mac) opens DevTools and focuses the Console panel.

ComputerGuru8y ago

> Is there a shortcut to just bring up the console?

I think it depends on the last feature used, but F12 does that for me. You can also try ctrl+shift+i (opt+cmd+i on Mac, I think?)

bsimpson8y ago

With DevTools open, Escape brings up the console.

heavymark8y ago

CMD+Shift+4 has always allowed you to take screenshots of any parts of your screen, (including your devtools), so curious why this is a feature in Chrome? Unless it's meant for Windows maybe where it's harder to take screenshots?

ehsankia8y ago

It's nice to have a uniform way across all operating systems, but more important than that, being able to take screenshot of specific elements makes it much nicer than you having to crop the image manually or try to get the perfect snipped screenshot. I assume this also handles screenshots that are larger than your display, which would be very hard with OS screen grab for elements that can't fit in a single screen.

aargh_aargh8y ago

I imagine this will be useful for taking screenshots of arbitrary elements via the headless mode.

Anyway, why would it be harder to take screenshots in Windows? Have they restricted the Win32 API recently (I haven't kept tabs)?

reustle8y ago

I think he is referring to how on windows you can only screenshot the entire screen. Not sure if that has changed in recent years.

2 more replies

booleanbetrayal8y ago

this is the only thing preventing CasperJS / PhantomCSS from supporting Puppeteer, I think. will be cool to see this go in.

0x08y ago

You can hit printscreen in windows to take screenshots (1 key instead of 3, even easier than mac).

I could imagine it would be useful in remote debugging sessions (such as when inspecting android webviews over USB).

simlevesque8y ago

Those are two totally different things. Windows take a screenshot of everything visible. Cmd+shift+4 on a Mac allows to select a region to save as a screenshot. Finally, if you are on Mac, this update provides node level acreenshot, allowing you to save an image of a HTML node with just one click, no need to drag the cursor. This is especially useful if the node takes more space than the viewport since before you had to stitch screenshots together.

2 more replies

ehsankia8y ago

Actually, the equivalent on Windows that was added on Windows 10 Creators update is winkey + shift + s.

mikewhy8y ago

Don't you still have to open Paint, press paste, hit save, and choose where to save the screenshot?

For the record, cmd+shift+3 takes a screenshot and immediately saves it to your desktop on macOS.

1 more reply

j / k navigate · click thread line to collapse

39 comments

wluu8y ago

[0] https://developer.mozilla.org/en-US/docs/Tools/Network_Monit...

alt25018y ago

I like Firefox too, but chrome still displays JSON objects in the console very nicely. I haven't found a good way to do this in FF yet. Do you know of a way?

samtoday8y ago

If it is a GET request, just open it in a new tab. Firefox has a built-in json viewer (no extensions required).

Eg. open this in a new tab: http://httpbin.org/get

dzhiurgis8y ago

IDK man, afaik there's no way to prettify API responses in a Response tab.

joshribakoff8y ago

zspitzer8y ago

There's a long thread about it here, but the chrome developers haven't really engaged with the community feedback

https://groups.google.com/forum/#!topic/google-chrome-develo...

The dev tools console has also become a dumping ground for repeated browser warnings and the option to turn them off isn't even persistent.

indigo00868y ago

Yup, worst decision ever. I’ve been using Firefox but performance drastically drops when debugging so I go back to using chrome. I just prefix my logging and filter.

zspitzer8y ago

I filed a bug about that too, feel free to vote for it :) https://bugzilla.mozilla.org/show_bug.cgi?id=1389864

dzhiurgis8y ago

Hey fellow HN'ers, I recently discovered you can select source in this (windows) terminal-like fashion by holding alt (i.e. https://imgur.com/a/XnCSd).

Does anyone know what is the purpose of this feature? I always disliked how difficult is to select something on windows cmd, this seems like anti-feature for me, but obviously I am missing something.

noway4218y ago

many text editors have that feature, while might be not that widely used or useful, it's still ported and implemented in many of them

mavidser8y ago

I've seen people use the same shortcut in sublime text to copy small code blocks (without copying the indentation).

rasz8y ago

column mode, very useful

nofilter8y ago

I see myself using the Block-level code coverage quite often.

styfle8y ago

Could be used to generate automated code coverage in headless mode?

nofilter8y ago

Ah, didn't even think of that, would be awesome!

petval8y ago

bennettfeely8y ago

Starting to think maybe it would be good to have a "DevTools" lite, now that there are literally dozens of tabs and pages. Is there a shortcut to just bring up the console?

ehsankia8y ago

ctrl+shift+j goes directly to console.

I believe ctrl+shift+i goes to whatever tab you were at last, and ctrl+shift+c goes to the element tab and enables the element selector.

I don't know if there's any other shortcuts but these are the one I use most often. You can also drag the various tabs to order them the way you like.

kaycebasques8y ago

Correct, Control+Shift+J (Windows, Linux) or Command+Option+J (Mac) opens DevTools and focuses the Console panel.

ComputerGuru8y ago

> Is there a shortcut to just bring up the console?

I think it depends on the last feature used, but F12 does that for me. You can also try ctrl+shift+i (opt+cmd+i on Mac, I think?)

bsimpson8y ago

With DevTools open, Escape brings up the console.

heavymark8y ago

ehsankia8y ago

aargh_aargh8y ago

I imagine this will be useful for taking screenshots of arbitrary elements via the headless mode.

Anyway, why would it be harder to take screenshots in Windows? Have they restricted the Win32 API recently (I haven't kept tabs)?

reustle8y ago

I think he is referring to how on windows you can only screenshot the entire screen. Not sure if that has changed in recent years.

2 more replies

booleanbetrayal8y ago

this is the only thing preventing CasperJS / PhantomCSS from supporting Puppeteer, I think. will be cool to see this go in.

0x08y ago

You can hit printscreen in windows to take screenshots (1 key instead of 3, even easier than mac).

I could imagine it would be useful in remote debugging sessions (such as when inspecting android webviews over USB).

simlevesque8y ago

2 more replies

ehsankia8y ago

Actually, the equivalent on Windows that was added on Windows 10 Creators update is winkey + shift + s.

mikewhy8y ago

Don't you still have to open Paint, press paste, hit save, and choose where to save the screenshot?

For the record, cmd+shift+3 takes a screenshot and immediately saves it to your desktop on macOS.

1 more reply

j / k navigate · click thread line to collapse