Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム
History API - Scroll restoration | Blog | Chrome for Developers
Using the History API to manage your URLs is awesome and, as it happens, a crucial feature of good web apps. One of its downsides, however, is that scroll positions are stored and then, more importantly, restored whenever you traverse the history. This often means unsightly jumps as the scroll position changes automatically, and especially so if your app does transitions, or changes the contents o
中央(右)揃えと三点リーダーによる省略
text-overflow: ellipsisではみ出した文字列を三点リーダーで省略できる。画面サイズのバリエーションが増え続けているので、こういったなんとなくどうにかしてくれることを期待できるCSSプロパティーは積極的に使いたい。のだけど、これとtext-align: center (right)を組み合わせた場合、テキストの開始位置がChrome 28だけ変化する。 Demo: text-overflow: ellipsis and text-align Internet Explorer 10とFirefox 23ではtext-alignプロパティーの値はどれでも同じ。Chrome 28ではcenterで少し、rightでは更にもう少しずれる。三点リーダーによる省略で余った余白をtext-alignプロパティーでどう扱うか、またはtext-alignとtext-overflowプロパ
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
ぼくがかんがえるさいきょうのWorkspace
Chrome Canaryに搭載されたWorkspaceは非常に良い機能だと思うんですが、いくつか指摘したい点があったので「ぼくがかんがえるさいきょうのWorkspace」を書いてみたいと思います。 WorkspaceとはなにかまずWorkspace自体の紹介ですが、これは簡単に言うと「DevTools上の修正がローカルファイルに保存される機能」です。 ただ、これだけなら「Local file sync」といったようなもっとわかりやすい名前があると思うので、これはおそらく「今後Chromeを開発環境的な方向に持っていくための機能」ではないかと思っています。 Workspaceの問題点フォルダ単位でしか指定できない「Add folder」でフォルダを指定しますが、フォルダ以外（ファイル）が指定出来ません。 これだと「単一のファイルだけ置き換えたい場合」に「そのファイルだけが入ったフォルダを作
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
JavaScript書くのに入れとくといいもの
Chrome CanaryDevToolsも進化してるのでStableではなくCanaryを Local ProxyPCのみならDevToolsだけでもいいけど、スマホのWebView内解析とか考えるとLocal Proxyは必須 Windowsなら Fiddler （無料） Macなら Charles （有料） Macでお金払うのが嫌な場合 CocProxy for nginx （無料。CUI。Ruby版使うくらいならこちらを） JS製が良くてソース読みたいなら Klepto （無料。GUI。不安定） ソースの文字コード変更ChromeでJS、CSS開くと日本語が化けるので、初期文字コードをUTF-8に変更 （フォント設定（ chrome://settings/fonts ）の一番下を「Unicode (UTF-8)」に） “This Frame” Context Menuiframeの
閉じたタブを再び表示させる方法ほか...Chromeのショートカットキー40選＋α | ライフハッカー・ジャパン
今回はGoogle Chromeのショートカットキーの紹介です。ここでは、アドレスバーに文字列を入力するだけで「Amazon.co.jp」や「Flickr.com」のサイト内検索ができるようになる方法など、アドレスバーのショートカットキーを設定する方法も扱います。どれも便利なワザですので、ぜひマスターしてください。■Windows編 1. 「Ctrl＋H」...履歴ページを開く。 2. 「Ctrl＋D」...現在のウェブページをブックマークとして保存。 3. 「Ctrl＋Shift＋D」...開いているすべてのページを新しい1つのフォルダにブックマークとして保存する。 4. 「Ctrl＋J」...ダウンロードページを開く。 5. 「Shift＋Esc」...タスクマネージャを開く。 6. 「Ctrl＋Shift＋Del」...「閲覧履歴の消去」（履歴やキャッシュを消去できるページ）を開く。
米Google社員が語った、作業が捗るGoogle Chromeテクニック20個！ – 和洋風KAI
和洋風KAIは、Apple・水樹奈々・食べ歩きが三本柱のブログです。モットーは「楽しく」「便利で」「端的に」。 ⇒ アバウト ⇒ 免責事項 1．テキストのみコピペする方法。 リッチテキストエディタなどを使っていると、ブラウザからテキストをコピペした場合、画像なども付いてくる場合があります。 そんな時は「Control+Shift+V（Macだとcommand + shift + V）」を使ってペーストすると、テキストのみ貼り付けることが出来ます。 2．最後に閉じたタブを復活させる方法。 誤ってタブを閉じてしまった時は、「Control+Shift+T（Macだとcommand+shift+T）」とショートカットキーを叩くと復活させることが出来ます。 3. タブにマウスを置くと、ウェブページのタイトルの全てが読める。 Google Chromeはタブを開きすぎるとタブがとても小さくなってタイ
Chromeの機能拡張 -Responsive Inspector | コリス
レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。
めっちゃ便利！Google英語版を速攻で検索できるようにChromeを設定する方法 – 和洋風KAI
全国1億人のプログラマーのみなさん、こんにちは。するぷ（ @isloop ）です。 僕がプログラムに行き詰まった時に行動ナンバー1は「Google英語版」でググることです。 なぜわざわざ英語版でググるのか？ それはプログラムのノウハウは日本語より英語の方が多いからです。 騙されたと思って、分からないメソッドやエラーコードを英語版でググってみてください。テンション上がるほどノウハウがリストアップされます。特に、stackoverflowの充実っぷりはネ申です。 しかし、日本語版Chromeをそのまま使っているとGoogle英語版を検索するのは結構大変です。 いくつものボタンをクリックしなければいけませんし、それに一度設定したらまた元に戻さないといけなくなります。 というわけで今日は、Google英語版を速攻で検索できるようにChromeを設定する方法をお教えしたいと思います。 Chromeで
グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる
グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる 学習内容は全部で以下の7つのレベルに分かれており、17本のビデオと、レベルごとに用意された、実際に自分で操作して解いてみる75以上の例題から構成されています。レベルをクリアするとバッジがもらえるようになっています。 Level 1: Getting Started & Basic DOM and Styles Level 2: Advanced DOM and Styles Level 3: Working With the Console Level 4: Debugging JavaScript Level 5: Improving Network Performance Level 6: Improving Performance Level 7: Memo
Googleの奇妙な人事異動が意味すること: 役目を終えた「Android」（小林 雅一） @gendai_biz
米Googleは先週、同社が提供するモバイルOS「Android」の事業責任者を交代すると発表した。これまでの責任者だったAndy Rubin氏が退き、今後は同社の「Chrome OS」事業の責任者であるSundar Pichai氏が両事業の統括責任者となる。 一見、腑に落ちない異動 この人事異動はちょっと見には、かなり不自然な動きだ。何故かと言うと、大成功した事業の責任者を降板させて、まあまあの成績を収めている事業の責任者を厚遇したからである。 Androidと（Chrome OSの前身となるブラウザ）Chromeの両事業は、奇しくも同じ2008年9月にGoogleの新規プロジェクトとして開始された。その後、両者は対照的な道のりを歩んだ。Androidは出足こそ鈍かったものの、2年目頃から急速に普及しはじめ、2012年には世界全体で出荷されるスマートフォンの約70％に搭載されるまでに至っ
CSSファイルやJavaScriptファイルを閲覧した際に自動整形して表示するChromeエクステンション・PrettyPrint
ブラウザでCSSやJavaScriptのファイルを見たときにソースを自動整形して表示するChromeエクステンション・PrettyPrintのご紹介。地味に便利・・かも。 ブラウザでCSSやJSファイルを見たときにソースをインデントするエクステンションです。便利っちゃ便利かも。
Google ChromeでCSSがSassの何行目に記述されているか確認する方法
Google ChromeでCSSがSassの何行目に記述されているか確認する方法 Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。 このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。 これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。 sass_options = { :debug_info => true } output_style = :expanded #output_style = :compressed 次にGoogle Chromeのインスペクタの
YouTube人気急上昇
【APEX-LEGENDS-】正直新レジェンド微妙過ぎるんじゃないか??wwwww【ゆっくり実況プレイ/エーペックスレジェンズ】
TechCrunch | Startup and Technology News
Yellow, an asset financier for solar energy and digital devices in Africa has raised $14 million series B funding in a round led by Convergence Partners with participation from the Energy Entrepreneur Fisker, the electric carmaker founded by the Danish auto designer Henrik Fisker, is gearing up to enter the Chinese market where competition is increasingly cut-throat, following in the footsteps of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これで解決！Chrome のアドレスバーで検索ができない - フロントエンドとかPCとかスマホとか
Google Chromeでfont-size指定が効かないときの対処法 – creamu