Inspecting Animations With Chrome DevTools

Of the many Chrome DevTool options we have available, there is one that shouldn’t be overlooked: the Animation Inspector. This tool helps you get a better visual of your animations. It also provides some useful debugging actions, and the ability to adjust animation timing on the fly — without needing to make changes in the Element Inspector or your code editor.

In this article, we’ll cover the basics of the Chrome DevTools Animation Inspector and learn a few ways to help save time while working with animations.

The inspector is not just for developers! Designers will find it useful while collaborating with developers, researching animations for design inspiration, or as part of a design QA process.

Accessing the Animation Inspector

Once you have the devtools open (option + cmd + i on Mac), you can find the Animations tab by clicking the “Customize and Control Devtools” icon on the right side of the panel. Then go to “More tools”, then “Animations”.

It would be nice if this tab could be moved into the main tab row in dev tools, but I wasn’t able to find a way to move it. If anyone knows how, please comment!

Better Visuals

The first thing you’ll notice with the tab open is that it’s actively listening for animations on the page. Each time one occurs, a tile will appear at the top that contains specific info about the animation, or animation group, that occurred.

What’s an animation group?

The Animation Inspector predicts which animations are related based on start time (excluding delays and so on) and groups them all side-by-side. In other words, a set of animations all triggered in the same script block are grouped together, but if they’re asynchronous then they’re grouped separately (see the Chrome DevTools Animation Inspector Guide for more).

This is interesting and important, as animations can have several different properties to keep track of, especially when it comes to more complicated ones. The inspector helps us by grouping them together where applicable.

#css #front-end-development #animation #programming #chrome-dev-tools

What is GEEK

Buddha Community

Inspecting Animations With Chrome DevTools

Of the many Chrome DevTool options we have available, there is one that shouldn’t be overlooked: the Animation Inspector. This tool helps you get a better visual of your animations. It also provides some useful debugging actions, and the ability to adjust animation timing on the fly — without needing to make changes in the Element Inspector or your code editor.

In this article, we’ll cover the basics of the Chrome DevTools Animation Inspector and learn a few ways to help save time while working with animations.

The inspector is not just for developers! Designers will find it useful while collaborating with developers, researching animations for design inspiration, or as part of a design QA process.

Accessing the Animation Inspector

Once you have the devtools open (option + cmd + i on Mac), you can find the Animations tab by clicking the “Customize and Control Devtools” icon on the right side of the panel. Then go to “More tools”, then “Animations”.

It would be nice if this tab could be moved into the main tab row in dev tools, but I wasn’t able to find a way to move it. If anyone knows how, please comment!

Better Visuals

The first thing you’ll notice with the tab open is that it’s actively listening for animations on the page. Each time one occurs, a tile will appear at the top that contains specific info about the animation, or animation group, that occurred.

What’s an animation group?

The Animation Inspector predicts which animations are related based on start time (excluding delays and so on) and groups them all side-by-side. In other words, a set of animations all triggered in the same script block are grouped together, but if they’re asynchronous then they’re grouped separately (see the Chrome DevTools Animation Inspector Guide for more).

This is interesting and important, as animations can have several different properties to keep track of, especially when it comes to more complicated ones. The inspector helps us by grouping them together where applicable.

#css #front-end-development #animation #programming #chrome-dev-tools

Chrome Devtools: Chrome DevTools Packaged As an App Via Electron

Maintenance status: Chrome DevTools App. is not proactively maintained or extended.

Original readme

Chrome DevTools App

Discontinued

This project is Discontinued. See https://github.com/auchenberg/chrome-devtools-app/issues/48

Chrome DevTools packaged as an app using electron-prebuilt.

This project is an exploration of how much work it would take to separate Chrome DevTools from Chrome itself and to explore what separation from the browser would bring to the table in terms of new functionality, etc.

I've written an article about this project, where I go in detail, and provide a few perspectives on what this project could evolve into. https://kenneth.io/blog/2014/12/28/taking-chrome-devtools-outside-the-browser/.

Installation

1. Go to the releases page, and download the latest DMG installer (Mac only, for now)
2. Drag Chrome DevTools App to your applications folder
3. Start an instance of Chrome with remote debugging enabled
4. Start Chrome DevTools App
5. Wait a second or click the refresh button.
6. Targets should show up. Click "Go" next to your target.
7. Bam. There go you.

Development

How to get started from source?

1. Run npm install
2. Run npm start

How to start this app from source?

1. Run npm install
2. Run npm install bower-cli -g
3. Run npm start

How to start a debug version of this app?

Run npm start

Releases

How to make a new build?

Run npm run release

---

Update on Chrome DevTools App.

Chrome DevTools App is now superseeded by https://inspect.dev/ – a new developer tool for macOS and Windows to inspect and debug your web apps and websites in Safari and WebViews on iOS devices 🤯🎉🔥

---

This project is highly experimental.

---

Author: Auchenberg
Source Code: https://github.com/auchenberg/chrome-devtools-app 
License: MIT license

#electron #devtool #chrome #javascript 

Chrome 91 - What’s New in DevTools

New to DevTools in Chrome 91:

What’s new in DevTools (Chrome 91) → https://goo.gle/3eLof2N

Memory inspector → https://goo.gle/349mLZY

You’re not seeing double! We published this episode in English and in Jecelyn’s mother language Mandarin as part of our Mother Language Day series.

Tweet us → https://goo.gle/38mi9Ay

What’s New in DevTools → https://goo.gle/2MeR5Kx
Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf

#devtools #chrome #google-chrome

Chrome 86 Aims to Bar Abusive Notification Content

Google has added a new feature to Chrome 86 that aims to stomp out abusive notification content.

Web notifications are utilized for a variety of applications – such as prompting site visitors to sign up for newsletters. However, they can also be misused for phishing, malware or fake messages that imitate system notifications for the purpose of generating user interactions. Google has taken steps to battle this issue by automatically blocking the web notifications that display abusive or misleading content.

When visitors encounter a webpage with malicious notification content, the webpage will be blocked and a Chrome alert on the upper navigation bar will warn them that the website might be trying to trick them into displaying intrusive notifications. It will ask them to “Continue Blocking” or “Allow” – the latter option will let users continue on to the webpage.

“Abusive notification prompts are one of the top user complaints we receive about Chrome,” according to PJ McLachlan, product manager with Google, on Wednesday. “Our goal with these changes is to improve the experience for Chrome users and to reduce the incentive for abusive sites to misuse the web-notifications feature.”

In order to detect sites that send abusive notification content, Google will first subscribe occasionally to website push notifications (if the push permission is requested) via its automated web crawling service.

Notifications that are sent to the automated Chrome instances will be evaluated for abusive content, and sites sending abusive notifications will be flagged for enforcement if the issue is unresolved, said Google.

When a site is found to be in “failing” status for any type of notification abuse, Google will send a warning email to the registered owners of the site 30 days before cracking down. During this time, websites can address the issue and request another review.

Google first implemented controls that went against abusive notifications with Chrome 80, when it introduced a “quiet notification permission UI [user interface]” feature. Then, in Chrome 84, it announced auto-enrollment in quiet notification UI for websites with abusive-notification permission requests, such as sites that use deceptive patterns to request notification permissions.

However, the new enforcement in Chrome 86 takes it a step further by focusing “on notification content and is triggered by sites that have a history of sending messages containing abusive content,” said Google. “This treatment applies to sites that try to trick users into accepting the notification permission for malicious purposes, for example sites that use web notifications to send malware or to mimic system messages to obtain user login credentials.”

In an upcoming release, Chrome will revert the notification permission status from “granted” to “default” for abusive origins, preventing further notifications unless the user returns to the abusive origin and re-enables them. That’s because “prior to the release of Chrome’s abusive notifications protections, many users have already unintentionally allowed notifications from websites engaging in abusive activity,” it said.

Google this week also warned of an update to its Chrome browser that patches a zero-day vulnerability in the software’s FreeType font rendering library that was actively being exploited in the wild.

#web security #abusive content #abusive notifications #blocking #browser #browser notifications #chrome 80 #chrome 84 #chrome 86 #google #google chrome #malicious notification #safe browsing #web security

Learn Character Design in After Effects 2D Animation Course

With the help of this course, you can learn to create and animate characters who express with body language in After Effects. Our personal purpose is to help anyone interested in Animation to start practicing with little projects, simple Characters, and most of all, explore the expressiveness of their Body Language and Character Acting. Many people seldom to start learning 2D animation because they are convinced that you need to know how to draw. While drawing skills can help you to improve, that is not the essential skill to do animation. For animation you need to understand the most basic principles in animation, like timing, anticipation, pose to pose. This course is divided into 3 parts theory, rigging and animation which will help you learn how to design characters, character animation and body language expressions. Enroll now and Learn to create 2D Animation in After Effects.

#2d animation #character animation #character rigging #learn animation #animation courses