みなさんブラウザは何を使っていますか。 僕はchromeです。 今回はchromeの検証の便利な機能を紹介したいと思います。 各種ショートカットキーはMacのものです。 何か便利小技が増えたら、ここに追記していこうかと思います。 1. 拡大縮小 拡大：「command」 + 「shift」 + 「+」 縮小：「command」 + 「-」 元の大きさに戻す：「command」 + 「0」 通常のブラウザの拡大・縮小と同じ 2. 上下キーで値の変更 Shift+↑ 10の増減 Alt+↑ 0.1の増減 3. 色をカラーピッカーから選択 カラーピッカーから色を選択できます。 さらに以前はchromeの拡張機能からしかできなかったような、サイト上から色を選択してとってくることもできます。 透明度も変更できる 4. minify化しているファイルを整形 minify化されているようなファイルを整形
Eager Evaluation コンソールで式を入力した時に、入力を確定させる前に結果がプレビュー表示されます。 次は .sort() の ) を入力した直後の状態です。 ちょっとした値の確認であれば、式を入力後に Enter キーを入力する手間が不要になります。 ただし副作用を起こす場合はこの機能が無効になります。次は配列を宣言し、値を追加しようとしているところです。push() は破壊的な操作になるためプレビューが行われません。 また、この機能はデフォルトでは無効となっています。有効にするには Console Settings から Eager evaluation にチェックを入れる必要があります。 引数のヒントを表示 コンソールで関数のカッコ ( を入力した際にその引数がツールチップで表示される機能です。 メジャーな IDE ではよくある機能ですね。 関数実行後の自動補完 関数実
Chromeデベロッパーツールの基本機能（DOMインスペクタ、スタイルパネル、JavaScriptコンソール）にはすでに慣れているかもしれません。しかし、あまり知られていない多くの機能があり、デバッグやアプリの作成ワークフローを大幅に改善することができます。 暗いテーマ Chromeには、開発ツール用の暗いテーマが組み込まれています。これを有効にするには、開発ツールペインの右上にある3つの点のアイコンをクリックし、「設定」をクリックしてテーマを切り替えます。 私は時にはこれを私の目でより簡単に見つけることができます。そして明らかに、それはもっとクーラーに見えます:) 選択モード Chromeデベロッパーツール（DevTools）では、要素を選択するさまざまな方法が用意されています。その中で最も便利なものは選択モードです。 このツールは、開発ツールパネル（またはcmd + shift + c
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 新機能 Lighthouse による新しい Audits パネル Lighthouse はサイトの品質を向上させる事を目的とした、Google によるオープンソースの監査ツールです。 Chrome で実行するにはエクステンションとして別途インストールする必要がありましたが、標準で Audits パネルに組み込まれました。ページに対して次のカテゴリを計測し、スコアを算出します。カテゴリは実施時に変更可能です。 Progressive Web App Performance Accessibility Best Practices 各カテゴ
Welcome to the first installment of the DevTools release notes! From here on out, the first time you open a new version of Chrome, DevTools opens the What's New drawer with a link to the release notes for that version. Highlights The Timeline panel has been renamed to the Performance panel. The Profiles panel has been renamed to the Memory panel. Cookie values are now editable. DevTools now automa
アニメーションが遅い問題を調査していて、どうやって原因を特定すれば良いかわからない状態だった。それをチャットで会話していたら同僚が「Chrome Developer ToolsのTimeline -> Bottom-Up -> Group by URL使うと良さそう」みたいなことを教えてくれた。使ってみたら非常に便利だったのでメモ。 Developer ToolsのTimelineである期間にどのような処理が動いていたか知ることができる(画像の上半分)ということは知っていた。しかし、下部分のSummaryのタブを切り替えてBottom-Upを押すと、いろんなグループでまとめて調査できるということは知らなかった。 その中でGroup by URLを選択すると、読み込みJSごとでかかっている時間がぱっと分かる。この中には自分が入れている拡張も含むので、自分固有の問題なのか、そうではないかも切り
allcolors.js # (view raw) Print out all colors from computed styles used in elements on the page. Uses styled console.log calls to visualize each color. // allcolors.js // https://github.com/bgrins/devtools-snippets // Print out CSS colors used in elements on the page. (function () { // Should include colors from elements that have a border color but have a zero width? var includeBorderColorsWit
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
Chrome の DevTools には Code Snippets という機能があります。 これは「DevTools 上でお気に入りのライブラリを登録しておいて簡単に呼び出して使いたい」と言った、ありがちなニーズにぴったりフィットする機能です。 ChromeのDevToolsでjQueryをいつでも使いたいなら、Source-Snippetsで右クリックして[New]選んでjQueryをペタリしておくと[Run]するだけでjQueryをDevToolsで利用可能になりますよ〜 http://t.co/SfLE4Sic39— コラーゲンたっぷりさん (@uupaa) 2014, 5月 15 http://t.co/Ee2keo5n7u これ色んな事につかえて、DevTools の IDE としての機能も、アイデアしだいで拡張できるので、もちょっと広く認知されるといいんだけども〜 (ミ・◇・
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く