After a long period of development Google has finally released its Chrome 59 update. With more than 1 billion users, it’s much more than a browser, and developers have to keep up to ensure they are taking advantage of everything available. Chrome 59 brings a lot of under-the-hood changes, combination of performance tweaks, new features and also some recent capabilities of the Web Platform.
Table of Contents
10. CSS and JS Code Coverage
The new Coverage tab in Chrome 59 allows you to find unused CSS and JS code. When you load a webpage, it shows you how much code was used, versus how much was loaded. You can decrease the size of webpages by only shipping the code you need.
When you click on a URL, the coverage tab displays the file in the “Sources” panel with a breakdown of lines of code executed. Each line is color-coded – green color means that line of code is executed, red means it didn’t execute, and a line having both green and red color means only some part of code on that line is executed. For example, var z = ( x > 10 ) ? x : 0, this expression would be colored both green and red.
9. Native Notifications On Mac
Chrome uses its own notification system for web and extension developers to show notifications to users. The new version is integrated with a new native notification system that will improve user experience and ensure that the notifications feel more integrated in the platform. Moreover, notifications will now respect do not disturb settings.
How native notification will look like? Well,
- There is no app appIconMarkUrl
- No big image in the notification bar
- The icon background will be transparent
- The icon will be smaller in size and padding is applied
- Chrome logo will always be there and cannot be altered or replaced
- The list notification template will only display the first item in the list
- Instead of a progress bar, you will see percentage value in the notification bar, indicating the progress.
- No more action buttons, users will need to hover over the notification and click the “More” button to see the available actions
8. Headless Chrome
A Headless browser is a web browser without a GUI. It provides automated control of a web page, and are executed through a command line interface or using network communication. It’s a perfect tool for executing automated tests and server environments where users don’t need to see the rendered output, instead they have a visible UI shell. For instance,
- Automating test in modern web apps
- Inspecting a page with DevTools
- Creating a PDF of a webpage
- Scraping websites for data
7. New Image Capture API
The previous version had limited access to your device’s camera. You would either upload a photo you’ve already captured, or switch from the browser to the camera app, take the photo, switch back to the browser and upload it.
Chrome 59 gives you the access to full resolution capabilities of all available cameras. The new API provides control of features like contrast, brightness, zoom, image focusing, adjust white balance, use of flash, and the ability to switch between cameras.
6. Full Page Screenshot
You don’t have to install any extension to capture full page screenshot anymore. Google has integrated this feature in the browser itself. To know how to take a screenshot from the top of the page, all the way to the bottom, follow the steps
- Open the webpage you want to capture the screenshot
- Click on the Menu on top right, and go to More Tool > Developers Tools. Alternatively, right click anywhere on the page and click on Inspect Element.
- Click on the Device Toolbar icon (blue color icon) in the toolbar
- Once you click it, it will show you the Responsive design view. Click on the menu on the top right and you will see the option that says Capture Full Size Screenshot.
- The screenshot will be saved in the download folder in PNG format.
5. Material Design Based Setting Page
The setting page of Chrome desktop version now utilizes Material Design. They have grouped up all of the settings and placed them into a single column. Besides the placements, the Setting page also comes with a sidebar menu that lets users navigate to a particular portion of the page. Moreover, the About Chrome page is integrated with Material Design too.
4. Block Requests
This is quite a useful feature for developers, which helps in testing purposes. While building an app or webpage, developers often need to see how the page behaves when a particular stylesheet, script, or other resource is not available.
To manage block requests, right click on the request in the Network panel and select Block Request URL. A new Request blocking tab would pop up in the Drawer.
3. Security Improvements
Google has made 3 key changes in Chrome 59:
- Block pages that are embedded using iFrames from sending notifications
- Do not allow pages to embed content from FTP servers
- Block requests for sub-resources that contain embedded credentials.
Also, in order to stop websites from spamming permission requests, Chrome will now temporarily block requests after the third dismissal of a prompt. The future requests (from the same website) will be stopped for a week.
Read: 45+ Best Chrome Extensions You Must Have
2. Animated PNG Support
Animated PNG (aPNG) is a relatively new file format, similar to GIF. However, unlike GIF it supports both 24 bit pictures and 8 bit transparency. The format has been gaining popularity since Apple chose to adopt the aPNG file format for iOS 10 iMessage app. Some browsers, including Mozilla Firefox, have long supported this format, and now the feature is available on Chrome too.
1. Less Page Load Time
Read: 20+ Tips and Tricks For Google Chrome – You Didn’t Know of
It would not be an actual update if Google didn’t try to improve the page load time on Chrome. They have updated the browser’s JavaScript Engine that would load pages faster while using less memory. At the time, developers noted that real-world performance would be better accounted for during engine architecture design. As the result of this optimization (including the optimization for startup times), Chrome has loaded webpages 10 to 20% faster than previous version.
