Core Web Vitalsを計測するChrome拡張がウェブストアからインストール可能に
[レベル: 初級] 今見ているページの Core Web Vitals を測定する Chrome 拡張を Chrome ウェブストアからインストールできるようになりました。 このブログで Web Vitals を紹介したときはまだアルファ版でした。 GitHub からファイルをダウンロードして、Chrome 拡張のデベロッパーモードを ON にし手動でインストールする必要がありました。 ウェブストアからであれば、ほかの拡張と同じように通常の方法でインストールできます。 ※アルファ版をすでにインストールしているときは、アンイストールしてから正式版をインストールすることを推奨します。 Web Vitals 拡張の使い方 使い方はいたってシンプルです。 Chrome に追加すれば、今見ているウェブページの Core Web Vitals (LCP/FID/CLS) をバックグラウンドで自動計測し
Google Chromeの拡張機能を1つに集約する管理方法 | ライフハッカー・ジャパン
私はブラウザの拡張機能が大好きです。 ブラウザをダークモードにする拡張機能や、Webサイトのプレビュー画面が表示される拡張機能など、多くの拡張機能を使っています。 その結果、ツールバーに拡張機能のアイコンが大量にあり、探している拡張機能を見つけるのに、一瞬混乱することもあります。 アイコンを1つに集約する方法現在Googleには、拡張機能のアイコンだけを表示して、その配下にすべての拡張機能を隠してツールバーを整理する「Extensions Toolbar Menu」というオプション機能があります。 これはGoogle Experimentから今すぐ使えます。 ブラウザのアドレスバーに「chrome://flags」と入力しEnterキーを押すExperimentのページが表示されたら、検索ボックスに「Extensions toolbar」と入力するツールバーのオプション「Extension
サイトのSEOチェックができるChrome拡張機能「Checkbot」
検索エンジンからのサイトの評価は、年を追う毎に多様化し、チェックするのも大変な状態になってきていますよね。 本来であれば、そんな事に時間を使うよりもユーザーのためになるものは何かを追求していくべきでしょうけれども、とはいえできるかぎりマイナスになるようなことは、コストが見合う限りはなくしておくべきでしょう。 今回は、そんな多面的にサイトをチェックする手間ひまを軽減してくれるツールをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! サイトをクロールしてSEOチェックができるChrome拡張「Checkbot」 「Checkbot」は、指定したサイトをクローリングすることによってSEOガイドラインや読み込みスピード、セキュリティの面からのチェックをおこなえるChrome拡張機能。 Goo
JavaScript Tracker - DOMイベントを捕捉するGoogle Chrome機能拡張
JavaScriptはイベント購読型の処理が多いです。DOMをクリックした際のイベントであったり、変数の変化をウォッチして処理が行えます。しかし、そういったコードが散在していると、どこでイベントを購読しているのかが分からなくなります。 そこで使ってみたいのがJavaScript Trackerです。JavaScriptのイベント処理を一覧し、ハンドリングできるGoogle Chrome機能拡張です。 JavaScript Trackerの使い方 DOMを選択すると、そこに紐付いているイベントが要素、振る舞いなどを一覧してくれます。 そこから実際のコードを辿ることもできます。 動作デモです。 JavaScript TrackerはjQueryにも対応し、DOMイベントの収集ができます。スタイルを変更するイベントも分かります。そしてそこからコードを辿ってデバッグが可能です。これはフロントエンド
レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy
iPhone, iPad, Nexus, Galaxyなど、主要なスマホ・タブレットの表示確認が同時にできる、レスポンシブ用の確認ツールを紹介します。 最近リリースされたばかりで、現在の対応デバイスにあった便利なツールです。 Sizzy Sizzy -GitHub Sizzyの特徴 Sizzyの使い方 Sizzyの特徴 Sizzyはオンラインツールとして利用でき、Chromeの機能拡張にも対応しています。動作は非常に軽快で、スマホ・タブレットの複数のデバイスで同時に確認ができます。 Sizzyの動作デモ 現在用意されているデバイスは、8種類。 iPhone 4: 320x480 iPhone 5: 320x568 iPhone 6: 375x667 iPhone 7 Plus: 414x736 iPad Air: 768x1024 Nexus 6P: 411x731 Galaxy S4:
View Background Image - 背景画像だけを表示させるChrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Google Chromeを使っていて、表示されている画像を保存したいと思うことがあります。そんな時にCSSのbackground-imageとして指定されていたりするとコンテクストメニューから指定できません。開発者ツールのリソースから探すのは面倒です。 そこで使ってみたいのがView Background Imageです。背景画像を表示させられる便利機能拡張です。 View Background Imageの使い方 インストールすると画像を右クリックした際に背景画像だけ表示というコンテクストメニューが追加されます。 選択すると画像だけ表示できます。 View Background Imageは単機能でシンプルですが、一度背景画像をダウンロードしたいと思って面倒な操作をしたことがあ
Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch