#CHROME FOR MAC SHOW DEVELOPER FULL SIZE#
#CHROME FOR MAC SHOW DEVELOPER SERIES#
#CHROME FOR MAC SHOW DEVELOPER DOWNLOAD#

Turn on the Chrome Developer Tools. Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

Navigate to the Echo demo, hosted on the site.

Be sure that your Chrome version is 58+.

Here are the simple steps to make the invisible visible: With the Chrome Dev Tools, you can now see the WebSocket traffic coming to and going from your browser without using tools like Wireshark. What makes working with WebSockets challenging at times is that the messages are extremely tiny and incredibly fast – making it hard to see them. Sign up for my weekly newsletter to get more practical tips, personal recommendations, and plain-English perspective on the news that matters.UPDATED May 2017: All content and screenshots updated to Chrome Version 58! This very popular post was originally written 5 years ago, back when Chrome was at version 20! We’ve completely updated this post to be accurate with the current version of Chrome. JRĬtrl-Shift-I, Ctrl-Shift-P, 'screenshot.' Say it, sing it, commit it to memory - and forever change the way you capture screenshots from your Chrome desktop browser. The resulting image will be in the size and shape of the phone. Once you've done that, just pick up where you left off and move on to the final two steps from above to capture and save your screenshot. That'll make the site you're viewing look like it's being viewed in the phone you selected. See that bar at the top of the screen, directly beneath the address bar? Click on the area where it says 'Responsive' and pick out whatever type of device you want from the list that pops up. Here's the trick: Start with the same first step we just went over - Ctrl-Shift-I (or Cmd-Option-I on a Mac) - then pause for a second. So you really want to get wild, you say? Well, wrap your tech-titillated hindbrain around this: In addition to snagging regular screenshots using this method, you can also capture a screenshot of a site's mobile interface right from your computer with almost the exact same set of steps.

#CHROME FOR MAC SHOW DEVELOPER DOWNLOAD#

Whatever screenshot you capture will show up as a regular image file download along the bottom of your browser window you can then open the file by double-clicking it right there or by looking in your Chrome downloads folder.

There's also a fourth option, 'Capture node screenshot,' but you probably won't want to mess with that.

If you want to capture a screenshot only of the current visible area, hit the up arrow once that'll take you to the 'Capture screenshot' option.

#CHROME FOR MAC SHOW DEVELOPER FULL SIZE#

If you want to capture the entire page, as if you were scrolling from the very top to the very bottom, hit the down arrow once and select 'Capture full size screenshot.'.If you want to capture a specific area of the current page, just hit Enter that'll select the default option of 'Capture area screenshot,' which will then allow you to draw a box around the area you want to save.All that's left is to figure out which one you want:

#CHROME FOR MAC SHOW DEVELOPER SERIES#

You'll see a series of screenshot options appear in a panel on the right side of the screen. Press Ctrl-Shift-P (or Cmd-Shift-P on a Mac).Īnd that's pretty much it.Press Ctrl-Shift-I (or Cmd-Option-I on a Mac).All right - here's the simple, hassle-free, and extension-free shortcut for capturing a screenshot in Chrome: Stick to this one specific set of instructions, though - and don't poke or prod anywhere else in that area - and you oughta be fine.Ĭool? Cool. The command is tucked away within the Chrome developer tools section, and there's plenty of advanced stuff in there that could mess up your browsing session if you aren't careful. Chrome's hidden screenshot secretīefore we get into the meat of this spicy tech sandwich, a quick but important word of warning: This Chrome screenshot capturing method takes you into some areas of the browser where regular folk shouldn't do much pokin'. Get ready to have your web-browsin' brain blown. The only problem? It's hidden away in a place where no normal mortal would ever possibly find it. And it works on Windows, Mac, Chrome OS, or any desktop platform where Chrome is available. It's flexible, effective, and easy as can be to use. Here's a little-known secret: Chrome actually has a supremely useful built-in command for capturing screenshots - no extensions required. For all of its features and web-spelunking utensils, Google's Chrome browser is curiously missing one core function: the ability to capture a screenshot of a website you're visiting.

Chrome for mac show developer