[B! Javascript][chrome] battaのブックマーク

スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger

スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。まずは、さっそく機能拡張のインストールから。下記のページにChromeでアクセスし、「Chromeに追加」をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストアこの機能

batta 2023/09/26

リンク

Manifest - content scripts | Chrome Extensions | Chrome for Developers

The "content_scripts" key specifies a statically loaded JavaScript or CSS file to be used every time a page is opened that matches a certain URL pattern. Extensions can also inject content scripts programmatically, see Injecting Scripts for details. Manifest These are the supported keys for "content_scripts". Only the "matches" key and either "js" or "css" are required. manifest.json { "name": "My

batta 2020/06/09

リンク

ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA

JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。この記事で学べることデベロッパーツールの使い方 JavaScriptのブレークポイ

batta 2019/05/18

リンク

What's New In DevTools (Chrome 73) | Blog | Chrome for Developers

Here's what's new in DevTools in Chrome 73. Video version of these release notes Logpoints Use Logpoints to log messages to the Console without cluttering up your code with console.log() calls. To add a logpoint: Right-click the line number where you want to add the Logpoint. Figure 1. Adding a Logpoint Select Add logpoint. The Breakpoint Editor pops up. Figure 2. The Breakpoint Editor In the Brea

batta 2019/01/23

リンク

僕が考えたChrome拡張機能を作るときのデザインパターン

最近いくつかのChrome 拡張機能を作っていて、すでに数千人のユーザを獲得できているものが出てきてたりします。 Image collector extension goo.gl URL Shortener extension mixi Check button extension Semantic inspector これだけ作ってると、何となく自分でのChrome 拡張機能を作り出す際のデザインパターン・・・っていう大それたものじゃないけど、ようはテンプレが確立されてきます。全く褒められない書き方をしているかもしれませんが、ここでそのテンプレ達を晒しておこうかな、と思います。 manifest.json まずはChrome 拡張機能の要であるマニフェストファイルです。これは誰が書いてもさほど変わらない記述内容となるでしょう。 { "manifest_version": 2, "name":