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, 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... 続きを読む

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...記事の続きを読む 続きを読む

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）のデベロッパーツールでスマホ表示を確認した後、実機のスマホでテストする際、素早くテスト対象ペ... 続きを読む

【速報】Chromiumを採用した、mac OS版のMicrosoft Edge（プレビュー版）がリリースされました！ | コリス

2019/05/21 43 users Chromium コリス MacOS Edge プレビュー版

mac OS版のChromiumを採用したEdge（プレビュー版）がリリースされました。 Windows 10版と同じで、デベロッパーツールも利用できます。 Introducing the first Microsoft Edge preview builds for macOS このペースなら、年内に正式版がリリースされそうですね。 あとは、移行がスムーズに行われれば、開発も楽になりま... 続きを読む

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

2019/05/17 558 users ICS MEDIA Chrome 方法 ２０１９年版

JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chro... 続きを読む

意外と知らない？HTML/CSSを書く上で便利なデベロッパーツールの機能13選｜Kazutaka Shimizu｜note

2019/05/08 438 users 独学 フリーランス コンサルタント エンジニア はてブ

※はてブの総合ホッテントリに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プ... 続きを読む

Web制作に役立つ、Chrome 72 デベロッパーツールの新機能のまとめ | コリス

2019/02/05 47 users コリス Shadow DOM 検出 Web制作 まとめ

先週の1/29にリリースされたChrome 72に伴い、デベロッパーツールも新機能がアップデートされました。Web制作に役立つ新機能を紹介します。 What's New In DevTools (Chrome 72) パフォーマンス指標のビジュアル化 テキストノードをハイライト表示 Shadow DOMに役立つ「Copy JS path」 JavaScriptライブラリの検出 動画... 続きを読む

デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code | コリス

2019/01/28 226 users コリス デバッグ エディタ プレビュー デバッグ作業

エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Prev... 続きを読む