incorporatedsitespeed.blogg.se - F12 for google chrome mac

#F12 for google chrome mac how to
#F12 for google chrome mac android
#F12 for google chrome mac free
#F12 for google chrome mac windows

There are several ways to open the Developer Tools on Google Chrome.

With this tool, it’s possible to change the appearance and content of a web page by editing its CSS and HTML files. Inspect Element is a feature of Chrome Developer Tools that allows you to inspect and modify a page’s frontend web elements. Getting to Know the Elements Panel in Chrome

#F12 for google chrome mac how to

How to Access the Inspect Element Tool on Chrome?.

What Can You Do With Chrome Developer Tools?.

Getting to Know the Elements Panel in Chrome.

Simply use the methods I described above and it should give you a crisp example of your site being used in the wild across a multitude of devices. It's very effective, but you'll need screenshots of your website at the appropriate resolution for it to work well. Some Photoshop or Sketch work will be required of course, and don't forget to compress the result.ĭunnnk is a fantastic little website that will let you generate images of websites and apps in real-life scenarios. This resolution will give you the right aspect ratio to fit nicely into the iMac device frame below. Set the mode back to "responsive" in the device toolbar, and input the resolution. So in the case of the iMac, let's use 1920x1280 (I know that fits the frame below). We can use the technique I described above to generate screenshots of any resolution our heart desires.

#F12 for google chrome mac free

Sketch is my go-to for these things, but feel free to use Photoshop if you have it and can use it, or GIMP (a free alternative). For this, we'll need to employ some photo editing skills. However, we can't (yet) generate one for laptop or desktop devices.

#F12 for google chrome mac android

The above technique will work for generating screenshots with Android and Apple mobile device frames, as well as Apple's iPad. Let Chrome take your screenshotĬhrome has a feature where it can take a screenshot of your current page, which will include the device's frame. We can change this from the drop-down menu, selecting from a range of devices from both Android and Apple.Īt time of writing this blog, some device frames aren't available, such as the iPhone X, but they'll come in an upcoming Chrome update. When you first open the device toolbar, it'll likely be set on "responsive". Select the desired device from the dropdown menu I find it's a great tool for general development as it helps get a sense of scale regarding the UI. We need to make sure this is enabled so that Chrome shows us the device frame wrapped around our responsive site. Click "Show Device Frame" from top-right menu Open it by clicking on the icon in the image above, or use CMD+SHIFT+M to open it on Mac, or CTRL+SHIFT+M on Windows. The device toolbar is where the magic happens.

#F12 for google chrome mac windows

I like my keyboard shortcuts, so using CMD+ALT+J on Mac, and CTRL+SHIFT+J on Windows will open up the dev tools window. Navigate to your website in the chrome browser.įor this example I'll be using my latest side project, mydevportfol.io 2. Device Frames In Chrome Dev Toolsįor mobile and tablet devices, Chrome dev tools is my go to for generating images that show my projects in all their responsive glory. Our readers aren't always tech-savvy, so we have to spell it out for them, and a picture says a thousand words, as they say. Making sure recruiters and prospective clients know that you can build and/or design responsive websites is essential for any modern web developer, and just including skills like " Bootstrap" won't cut it. In this post, I want to share how I generate (most) of them using the Chrome dev tools. I've been sharing them on Reddit and getting some fanastic feedback, and one of the questions I repeatedly get asked is where I get the device frames and images for my templates. If you haven't, you can check them out here and here. If you've been following the blog, you'll know that I've been busy building portfolio templates for developers and programmers for the last few months.