「Google Chrome 105」安定版リリース、ウェブUI開発に便利な機能が続々搭載
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン104.0.5112.81(Windows版、macOS版/Linux版は105.0.5195.52)がリリースされました。新たなCSS疑似クラスの実装など、ウェブUIの開発を容易にするであろうさまざまな機能が追加されています。 ◆CSS疑似クラスの追加 今回、新たに二つのCSS疑似クラスが追加されています。:has()は引数で渡された相対セレクター要素を1つ以上持っている場合に有効となります。 /* <div> 要素のうち直接 <img> を含んでいるもの */ div:has(> img) { background-color: black; } :modalは、それが存在している間は外部の要素とのすべての相互作用を排除する状態にある要素(つまりダイアログ的な要素)に対して有効となります。 :modal { bor
Android の Chrome で開発者ツールを使う方法 - Qiita
スマホのサイト作っててPCブラウザのUA偽装じゃなくて実機で見たいってことはよくある。 実機で見ながらHTMLとかCSSをいじって確認したいと思ってスマホで開発者ツール的なのが無いかと探したらあった。 あったけど試したらうまくいかなくて紆余曲折して最終的にめっちゃ簡単だったのでメモ。 やりたいこと PCブラウザのChrome開発者ツールみたいなものをスマホのブラウザでもやる 環境 PC: Windows 7 64bit PC 版 Chrome: ver. 41 Android 端末: SO-03F / Android 4.4.2 Android 版 Chrome: ver. 40 準備 Android の USB デバッグを許可する 設定 ＞ 開発者向けオプション ＞ USBデバッグ にチェック 開発者向けオプションが表示されていなければ、 設定 ＞ 端末情報 ＞ ビルド番号 を連打して表
メンバーズ｜Members Co.,Ltd.
デジタルビジネス運用支援で 企業の脱炭素DXを推進する メンバーズは、デジタルビジネス運用に特化したデジタルクリエイターを提供し、 専任チームによる伴走型支援でお客さま企業の成果を追求します。 お問い合わせ
フォームの入力内容を保存するChrome拡張機能【Autofill】
Chrome拡張機能『Autofill』の導入方法 今回紹介する『Autofill』は、Chromeの拡張機能として利用する事ができる、プラグイン的な位置づけの作業系ツールです。 『Autofill』をChromeに追加する方法 Chrome拡張機能の追加方法は簡単で、以下のリンクから『Autofill』のページへ移動し、『Chromeに追加』ボタンを押せば完了します。（※逆に削除をしたい場合は、追加後に表示される『Chromeから削除します』ボタンを押せばOKです） ▼公式サイト Chromeウェブストア - Autofill Chrome拡張機能『Autofill』の使い方 基本的にはWEBフォームの内容を『保存する』事と『読み込む』事がこのツールの主な使用方法になります。それぞれ順番に解説してゆきますね。 1.フォームの内容を保存する Autofillを使ってフォームの内容を保存する
意外と知らない？HTML/CSSを書く上で便利なデベロッパーツールの機能13選｜かずたか
※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ
Web制作に役立つ、Chrome 72 デベロッパーツールの新機能のまとめ
先週の1/29にリリースされたChrome 72に伴い、デベロッパーツールも新機能がアップデートされました。Web制作に役立つ新機能を紹介します。 What's New In DevTools (Chrome 72) パフォーマンス指標のビジュアル化 テキストノードをハイライト表示 Shadow DOMに役立つ「Copy JS path」 JavaScriptライブラリの検出 動画バージョン パフォーマンス指標のビジュアル化 ページのロードを記録した後、DOMContentLoadedやFirst Meaningful PaintのようなパフォーマンスメトリックをTimingsセクションにマークするようになりました。 TimingsセクションのFMP Performanceパネルに移動。 Recordボタンをクリックして、ロードを記録。 Timingsセクションを展開。 テキストノードをハ
色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
Chrome 70 デベロッパーツールが便利になってる！Web制作者がチェックしておきたい新機能のまとめ | コリス
DOMノードの強調表示 Consoleタブを選択。 DOMノードに評価される式を入力。 入力する式 以下の便利な式を使用できます。 「document.activeElement」で、現在フォーカスのあるノードを強調表示。 「document.querySelector(s)」で、任意のノードを強調表示。sはCSSセレクタで、DOMツリー内のノード上をホバリングするのと同じ。 「$0」で、DOMツリーで現在選択されているノードを強調表示。 「$0.parentElement」で、現在選択されているノードの親を強調表示。 パフォーマンスパネルの最適化 今までのパフォーマンスパネルは大きなページをプロファイリングする際にはデータの処理とビジュアル化に時間がかかりました。Chrome 70ではこの処理とビジュアル化が高速になりました。 パフォーマンスパネルの最適化 信頼性の高いデバッグ Chro
Redux Devtools Extensionを使った時のこの感動を伝えたい - Qiita
Reduxというものを知って、さらにこのツールに出会った時に感動したので、ぜひ伝えたいと思います。 Reduxについて 色々解説してくれてますので、それを参考にしてください。 https://qiita.com/kiita312/items/49a1f03445b19cf407b7 ようはUIの状態を管理するフレームワークだそうです。 Redux Devtools Extensionについて Reduxアプリの開発ツールの一つで、 ブラウザの拡張機能からReduxの状態管理を可視化してくれます。 chromeやfirefoxで使えるようです。 デモ 何がいいのか？ 1. デバッグが便利 どのアクションでどの状態になり、どんな値を持つのか一発でわかります。 状態遷移後の値の差分もみれたりします。 2. テストでも活躍するかも テスト時にバグを発見した場合、そのバグを開発者側で再現したい時があ
Web制作者は要チェック！Chrome 68でアップデートされたデベロッパーツールの新機能
25日の昨日にリリースされたChrome 68で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 ブラウザの方は、以前から伝えられていた通り、http通信の際に「保護されていない通信」と表示されるようになりましたね。 What's New In DevTools (Chrome 68) コンソールの補助機能 より素早く、信頼性が高いUIとAudits BigIntのサポート Add property path to watch Show timestampsの移動 コンソールの補助機能 Chrome 68では、オートコンプリートやプレビューに関連する新しいコンソール機能が加わりました。 式の結果をプレビュー コンソールに式を入力すると、その式の結果をカーソルの下にプレビューできるようになりました。 sort()の結果をプレビュー Consoleをクリックして、コン
Getting Started with Headless Chrome | Blog | Chrome for Developers
TL;DR Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Why is that useful? A headless browser is a great tool for automated testing and server environments where you don't need a visi
Chromeデベロッパーツールの機能が、すごく簡単で便利！ローカルサーバーを1分もかからずにすぐ構築できる
Chromeデベロッパーツールはいろいろ便利ですが、お手軽にローカルサーバーも構築することもできるんですね。簡易的なサーバーですが、HTML, CSS, JavaScriptのWebページであれば充分な機能を備えています。 Chromeデベロッパーツールを使用して、ローカルのWebサーバーを構築する方法を紹介します。もちろん、WindowsでもmacOSでもどちらでも簡単にできます。 1分もかからずに用意することができ、切り替えは1クリックでOKです。 What's New In DevTools (Chrome 65) デベロッパーツールのバージョン Step 1: ファイルを用意 Step 2: デベロッパーツールの設定 Step 3: ローカルのWebサーバーにアクセス デベロッパーツールのバージョン ローカルのWebサーバーを構築するには、デベロッパーツールの「Local Over
Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ
Web制作者にとって、Chrome デベロッパーツールは欠かせません。Web制作にすぐに役立つ、便利な機能・使い方を紹介します。 Cool Chrome DevTools tips and tricks you wish you knew already 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 要素をElementsパネル内でドラッグ&ドロップ 02. コンソールで現在の要素を参照 03. コンソールで最後に実行された値を参照 04. セレクタを加えて、要素のスタイルを追加 05. 変更したCSSをファイルに保存 06. 指定した要素のみをスクリーンショット 07. CSSセレクタを使用している要素を検索 08. コンソールで複数の行にまたがるコマンドを記述 09. Sourcesパネルの便利な機能 10. Wa
【小ネタ】theme-colorタグでAndroidのChromeのタブ色を変える
ここ最近、いろんなWebサイトを見ています。いつにも増して見ています。手元にiPhoneとNexus6を置いているので、それらも駆使して見ています。 そんな中、AndroidのChromeで閲覧していると、アドレスバーが通常と異なる色になるサイトがいくつかありました。どうしても試してみたくなったので、実際にやってみたのが以下の画像です。 タブ選択する時はアイコン周りにも色とアイコンが付きます。 今回は、小ネタとして、この設定方法を紹介します。 Google Developpersに設定方法が記載されており、これを参考にさせていただきました。 参考サイト: Support for theme-color in Chrome 39 for Android 対応環境Android用 Chromeのバージョン 39以降Android バージョン5(Lolipop)以降※iOSのsafariとChr
デベロッパーツールでのスマホ確認の裏ワザとクラウド実機テスト
スマホサイトの制作において欠かせないのが実機での表示確認。しかし、解像度はもちろんのこと、コードの解釈も多種多様なスマートフォンにおいて、すべての端末でひとつひとつ検証していくのはコスト面でも現実的ではありません。そのため現場では、実機とエミュレーターを組み合わせてテストするのが一般的になっています。 今回は、Web開発ツールとして人気の「GoogleChromeデベロッパーツール」であまり知られていないスマホ検証の裏ワザと、実機テストにかかるコストを抑えることができる、クラウド実機テストサービス「Scirocco Cloud（シロッコクラウド）」について紹介します。 GoogleChromeデベロッパーツール GoogleChrome（グーグルクローム）のデベロッパーツールは、Webサイトがスマートフォンでどのように表示されるか、ブラウザから手軽にチェックできます。100%正確に表示再現
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Unable to add filesystem permission denied
印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決 | 初代編集長ブログ―安田英久
Chromeでmedia printを確認・デバッグする方法
Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法
