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セクションを展開。 テキストノードをハ
【2022年版】Google Chromeが重い・遅い・固まる！ 解消方法まとめ【原因と対策】 - 新作ソシャゲおすすめランキング｜事前登録リリース日まとめ一覧｜新作アプリ最新スマホゲーム
Chrome最新版の『 flags 』内にて、bookmark関連の調整を行える機能が無くなりました。 わりと緊急性も高いので、先に追記した塊を掲載しております<(_ _)> Chromeの重い動作やプチフリーズ（固まる現象）改善するためにも、お読み頂くことを推奨します 読み飛ばしたい方は『 文字の小さい部分 』を飛ばして、ここの文字サイズと同じ部分までスクロールお願い致します<(_ _)> お手数をおかけします…… （重要性が「高」のアップデートが配信されました。それに伴い、当サイトのChrome記事にある情報の「更新・追記」を行いました。（ アップデート方法も、ここの続きに記載） 私もChromeの不具合（プチフリーズ）があったのでアップデートをチェックし、最新版にすると改善されました。 まだの人は、Chromeウィンドウの右上にある「 設定 」アイコン（バージョンによって、「縦に並ん
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Chromeデベロッパーツールでモバイルをエミュレートする | Web Tips
公開日：2014年3月2日 最終更新日：2014年7月13日 Chromeに標準搭載されているデベロッパーツールには、モバイルをエミュレートする機能が豊富に備わっています。デバイス、ユーザーエージェント、画面解像度の指定ができるだけでなく、タッチスクリーンのエミュレートも可能です。 デスクトップPC上で、モバイルのシミュレートやエミュレートができるツールはたくさんありますが、Chromeのモバイルエミュレーション機能は本当に便利です。 スマートフォンサイト制作のデバッグでは大いに役立ち、私はもっぱらこの機能を使ってデバッグしています。 【コンテンツ】 エミュレーション機能を有効にする デバイスをエミュレートする 画面解像度を指定しエミュレートする ユーザーエージェントを指定しエミュレートする タッチスクリーンを有効にする 【記事執筆時の環境】 Windows 7 Professional
jQuery を使って 30 分で Chrome 拡張を作ってみた
こんにちは。坪内です。 jQuery ってすごいですね。何でもできますね。そして、Chrome の拡張ってめっちゃカンタンに作れるんですね。 jQuery を使って、Sleipnir 3 for Windows とか Sleipnir Start の検索結果ページにファビコンを追加する Chrome 拡張、その名も Favicon2SleipnirSearch をサクッと作ってみました。 jQueryとChrome 拡張についてカンタンな説明 jQuery とは jQuery は JavaScript のライブラリです。普通に JavaScript で十数行くらいコードを書かないといけないようなプログラムでも、jQuery では、一行で済んだりします。使い方もカンタンなので、とりあえず自分で何か動かしたい、とか自分のWeb サイトで何か動的なことがしたい、って言う人にはとっつきやすくていい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパーツールの新機能が便利！CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ
Chrome Extensions API リファレンス