CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

2024/11/12 18 users デバッグ CSS AIアシスタント 検証

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。 5 Cool Things To Do with DevTools AI Assistance AI assistance panel AI assistance fo... 続きを読む

無料でYouTubeやX(旧Twitter)の動画をURLをコピペしてダウンロードできる「cobalt」

2024/06/10 269 users Cobalt yt-dlp YouTube 旧twitter

YouTubeなどに投稿される動画は、ブラウザのデベロッパーツールや「yt-dlp」などを使ってダウンロードできますが、操作が少し手間です。オープンソースプロジェクトとして公開されている「cobalt」を使うと、URLを貼り付けるだけでYouTubeやX(旧Twitter)の動画をダウンロードできるとのことなので、実際に使ってみました... 続きを読む

ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた

2024/04/10 18 users デバッグ Rea Reactコンポーネント ブラウザー 用途

とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなRea... 続きを読む

横スクロールバーの発生源を素早く特定する方法と最新の防止策 ｜ TAKLOG

2024/03/18 114 users TAKLOG outline Console スクリプト 要素

横スクロールバーの発生源はデベロッパーツールのConsoleですぐに特定できる横スクロールバーの発生源の特定方法として有名なのは全称セレクタですべての要素にoutlineを付与して確認する方法だと思われますが、次のスクリプトをデベロッパーツールのConsoleに貼り付けて確認したほうが手っ取り早いです。 const windowW... 続きを読む

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

2023/09/26 15 users 挙動 アニメーション デバッグ ブラウザ トリガー

スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。 スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単に... 続きを読む

Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります

2023/05/30 7 users セレクタ CSS Chrome 普段

ようやくか、という声も聞こえてきそうですが、ChromeのデベロッパーツールでCSSの詳細度が表示されるようになります。 CSSを普段使用している人はセレクタを見ただけで詳細度が分かると思いますが、こういうちょっとしたア...記事の続きを読む 続きを読む

使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法 - ICS MEDIA

2023/03/17 8 users デバッグ CSS 必須 ICS MEDIA Chrome

ウェブ制作をする上でCSSでのスタイルの記述は必須ですが、意外とデバッグが難しくデザイン通りに実装するには手間がかかります。 そんなときに活躍するのがGoogle Chromeの「デベロッパーツール」です。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。 ... 続きを読む

ブラウザのロゴを高解像度でダウンロードできる！ Chrome, Safariの現在のロゴをはじめ、IE, Netscapeなど古いのも

2022/12/14 28 users Netscape Canary Safari Chrome

Chrome, Edge, Firefox, Opera, Safariをはじめとする現在のロゴから古いバージョンのロゴをはじめ、デベロッパーツールやCanaryなどのロゴ、古いIE, Netscape, Mosaicな...記事の続きを読む 続きを読む

デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

2022/11/02 310 users Flex Flexbox display デベロッパツール

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携... 続きを読む

CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方

2022/09/28 71 users z-index CSS ダイアログ ドキュメント 要素

ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に... 続きを読む

レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター

2022/08/04 196 users iPhone レスポンシブ Pixel GALAXY iPad

iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーター... 続きを読む

CSSの実装はコンテナクエリで大きく変わる！ コンテナクエリをデベロッパーツールで検証およびデバッグする方法

2022/07/15 26 users コンテクスト レスポンシブ デベロッパー コンポーネント 実装

Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。 このCSSの新機能コンテナクエリによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。Googleのデベロッパーによるコンテナクエリを... 続きを読む

Tailwind CSSの実装やデバッグに便利！ 各セレクタに対応したプロパティや値を表示するデベロッパーツールの機能拡張 -Tailwind DX

2022/06/28 19 users セレクタ デバッグ Chromeデベロッパーツール 実装

デベロッパーツールでTailwind CSSの各セレクタに対応したプロパティや値を実装・デバッグできるChromeデベロッパーツールの機能拡張を紹介します。 .m-1や.p-1といったセレクタをはじめ、:smや:lgなど...記事の続きを読む 続きを読む

知っておくと便利！ CSSでUIデザインを微調整する時短テクニックとプロセスを解説

2022/04/26 17 users CSS 時短テクニック プロセス UIデザイン figma

WebサイトやアプリのUIデザインで欠かせないのが、FigmaなどのデザインツールとChromeなどのデベロッパーツールです。この2つをどのように使い分けるとよいのか、デザインツールでやるよりもブラウザ上でCSSでやった方が便利な時短テクニック、UIデザインを微調整するプロセスを紹介します。 Tweaking In The Browser by... 続きを読む

「Google Chrome 97」が正式版に ～「Critical」1件を含む37件の脆弱性に対処／デベロッパーツールにはユーザーフローを記録・再生・分析するツールや設定の同期機能が追加

2022/01/04 7 users Critical 脆弱性 ユーザーフロー 対処 正式版

続きを読む

Chrome 95のデベロッパーツールの新機能が便利！vh, vw, rem, emなど、CSSの単位を簡単にオーサリング

2021/10/25 15 users rem デバッグツール オーサリング Flexbox CSS

先週リリースされたChrome 95のデベロッパーツールに搭載された新機能が便利なので、紹介します。 最近の新機能だと、Flexboxのデバッグツール（紹介記事）やCSS Gridのデバッグツール（紹介記事）などがありますが、Chrome 95ではCSSの単位（vh, vw, rem, emなど）を簡単にオーサリングできるようになりました。 New CS... 続きを読む

Chromeデベロッパーツールが日本語??をサポート、CWV改善に必須のツールを日本語で使えるように | 海外SEO情報ブログ

2021/08/25 11 users Chromeデベロッパーツール language ツール

[レベル: 上級] Chrome 94 のデベロッパーツールが日本語を含む 80 以上の言語で利用できるようになります。 デベロッパーツールを日本語で使う デベロッパーツールを日本語で表示にするには、右上にある歯車アイコン⚙️から言語設定を変更します。 [Language] という項目があります。 ここから [Japanese – 日本語] を選... 続きを読む

デベロッパーツールの新機能が便利！CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ | コリス

2021/08/02 19 users コリス CSS Grid 実装 オーバーレイ 検証

先日リリースされたChrome 92のデベロッパーツールに、CSS Gridの実装に役立つ新機能が2つ加わりました！ 1つ目はCSS Grid editorでデバッキングツール、2つ目はCSS Gridのオーバーレイ、どちらもWeb制作でCSS Gridを使用する時に大活躍すること間違いなしです。 参考: New CSS Grid debugging tools 機能は簡単に言うと... 続きを読む

Chrome 91でデベロッパーツールがさらに便利に！スクロールスナップの実装と検証が簡単になりました | コリス

2021/05/28 12 users コリス デバッグツール Flexbox スクロールスナップ

25日にリリースされたChrome 91のデベロッパーツールに、CSSの実装に役立つツールが搭載されました。Chrome 90ではFlexboxのデバッグツールが搭載され、今回のChrome 91ではスクロールスナップ（scroll-snap-typeプロパティ）の配置が可視化できるようになり、実装と検証に役立ちます。 参考: What's New In DevTools (C... 続きを読む

デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載 | コリス

2021/04/25 31 users Flexbox コリス 実装 オーバーレイ 検証

先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました！ 1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb...記事の続きを読む 続きを読む

Chrome88のデベロッパーツールのレコーディング機能でウェブバイタルの情報を記録できるように | 海外SEO情報ブログ

2021/01/21 7 users CLS performance 上級 オプション 安定版

[レベル: 上級] ウェブ バイタルを記録するオプションが、安定版 Chrome 88 のデベロッパー ツールの [Performance] レコーディング機能に追加されました。 安定版の Chrome 88 は 1 月 19 日にリリースされました。 現在更新できます。 Web Vital オプションで CLS を調査する 大きな CLS (Cumulative Layout Shift) が... 続きを読む

Dockerがマイクロソフトとのパートナーシップを深化、より良質な開発者体験を提供 | TechCrunch Japan

2020/05/28 10 users Docker Azure Mirantis 深化 拡充

Dockerは昨年の秋、そのエンタープライズ事業をMirantisに売却したが、企業としては健在でいまではクラウドネイティブのデベロッパーツールへと事業内容を変えている（未訳記事）。米国時間5月27日、同社はMicrosoft（マイクロソフト）とのパートナーシップの拡充を発表した。DockerのコンテナをAzureでもっと簡単に動か... 続きを読む

ダークモードの検証が簡単にできるようになった！Chrome 79 デベロッパーツールの新機能 | コリス

2020/02/05 11 users コリス ダークモード モード 検証 ライトモード

ダークモード対応のサイトを制作する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です。 Chrome 79 デベロッパーツールの新機能で、簡単にダークモードの検証ができるようになりました。下記のようにOS（ブラウザ）がライトモードでも、Webページを... 続きを読む

【ログイン・同期不要】表示中のWebページをQRコードでスマホに転送：Google Chrome完全ガイド - ＠IT

2019/10/23 17 users 同期 QRコード Google Chrome完全ガイド 以下

PCからスマホへ素早くURLを伝えたい 「Windows PCやMacなどで表示中のWebページを、いますぐスマホで開きたい」と思ったことはありませんか？　例えばスマホ用Webページを制作していると、Google Chrome（以下、Chrome）のデベロッパーツールでスマホ表示を確認した後、実機のスマホでテストする際、素早くテスト対象ペ... 続きを読む

インスタにパソコンから投稿する方法。ChromeのF12(デベロッパーツール)を使えばよかったのか - 勝間和代が徹底的にマニアックな話をアップするブログ

2019/05/28 9 users 勝間和代 www.instagram.com Chrome

www.instagram.com これまで、インスタはスマホかタブレットからしか投稿できないと思っていて、不便を感じていたら、 「パソコンのChromeのデベロッパーツールで、スマホの画面を見れば投稿できるよ」 とFacebook友達に教えてもいました。 インスタの画面に行って、F12を押して、スマホのボタンを押すだけなので、簡単... 続きを読む