Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show
いまだ調子が上がらず半夢遊病状態ですよ。 snep1000.hatenablog.com で、前回書いているように右手の腱鞘炎が再発。となると、性能の低いノートPCの出番だったりして…… snep1000.hatenablog.com 操作は多少楽になるとはいえ、性能が低いので主にブラウザを使ったルーチンワークの能率はダダ下がりである。 ブラウザはGoogle Chromeを使用している訳だが、こいつがとにかく重い。 以前は比較的軽いFirefoxを主に使用していたが、Androidのスマホを使っていたり、各種Googleのクラウドサービスとの連携を考えると今日ではChromeを使わざるを得ない。 以前は違うブラウザを使っていたのに今ではChromeを使っている人、自分以外にも多いと思う。 てなわけで、いやいやながらもChromeを使うしかないのだが、本当に糞重い。皆言ってるけどメモリ消費
ブラウザさえあれば使えるファイル転送サービス「reep.io」が便利そうだったので紹介です。 連絡を取り合える相手であれば手軽にファイルを送れるようになっているので、大きなサイズのファイルも送ることができます。 reep.ioとは reep.ioは、2つのブラウザ間をピアツーピアで接続し、ファイル転送を可能にするサービスです。 ピアツーピア（P2P：peer to peer）とは、コンピューター同士が対等に通信を行う通信方式のことです。「サーバーとクライアント」のようにコンピューター間に上下関係がなく、対等の者（Peer、ピア）どうしが繋がるという意味です。 WebRTCテクノロジー（ビデオや音声、データをブラウザ間でやり取り可能にする規格）を利用して、ブラウザ間をダイレクトでファイル転送を行います。 なので、WebRTCに対応したブラウザからしか使えません。けれどもブラウザさえあれば利用
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo
3rdに引っ越しました。 2010/12/31 以前＆2023/1/1 以降の記事を開くと５秒後にリダイレクトされます。 普段の日記は あっち[http://thyrving.livedoor.biz/] こちらには技術関係のちょっとマニアックな記事やニュースを載せます。 Windows2000ネタ中心に毎日更新。 【やじうまWatch】心当たりがあるかも？ Chromeの32→64ビット化で爆速になった体験記が話題に -INTERNET Watch Chrome の 64bit 版が軽いと話題になってる件について簡単に考察してみた ついでに、64bit版と32bit版を排他的に使う方法も紹介。 まず、先に32bit版か64bit版を入れておく。 そして、%PROGRAMFILES%\Google\Chrome\Application フォルダを開いて フォルダ名を 上のようにバージョン名
GoogleChrome（以下、Chrome）をメインブラウザとして使用しているWeb制作者の方は多いのではないでしょうか。 Chromeは標準のままでもじゅうぶんに快適なのですが、拡張機能（アドオン or エクステンションともいいます。）と呼ばれる機能があり、自分の好きなようにブラウザをカスタマイズすることができます。 この拡張機能によって、毎日のブラウジングがより快適になるだけでなく、Web制作を行うにあたっても非常に便利な機能を追加することができるのです。 しかし、非常に多くの種類があり、どれを選んでいいかわからない、という方もいるのではないでしょうか。 今回は、数あるChrome拡張機能の中から、特にWeb制作に携わっている人へ「最低限これだけは入れておきたい！」というものを厳選してご紹介します。 拡張機能をインストールする際の注意点 拡張機能は便利であるため、ついついインストール
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
Chrome DevToolsはとてもとても便利で、毎日お世話になっている神ツールです。 単純なHTMLの解析からGPUの使用具合というマニアックな情報まで色々確認出来ますが、その中でデバッグの時に設定しておく事で、ちょっとしたミスを減らして問題にすぐ気付ける設定が１つあります。 javascriptエラーが発生した場合にエラーを補足しBreakする Sourceタブを選択した場合に、左下にメニューがあります。 その中の機能としてボタンっぽいがあります。 これを、1回クリックします。するとという感じで色が変わります。次にもう一度クリックします。するとこんな感じで色がまた変わります。 これらを設定しておくと、javascript実行時に発生したエラーをDevToolが検知してBreakしてくれるので、すぐに問題のあるコードに気がつく事が出来、ミスにすぐ気がつく事が出来ます。 Pause on
By ntr23 Googleのウェブブラウザ「Google Chrome」は、2014年6月時点のシェアが19.34％とIEに続く第2位の地位にあるメジャーなブラウザなのですが、Windows PCで使用するとIEやFirefoxよりも消費電力が増加することが指摘されています。 Google's Chrome Web Browser Is Killing Your Laptop Battery - Forbes http://www.forbes.com/sites/ianmorris/2014/07/14/googles-chrome-web-browser-is-killing-your-laptop-battery/ Google Chromeが電力消費量が大きいのは、「system clock tick rate」と呼ばれる、Windowsが内部的に持っているタイマー部分に起因す
<div class="map_wrapper"> <div class="googlemap"> <!-- 地図埋め込み用 HTML コードをペースト --> </div><!--end of .googlemap--> </div><!--end of .map_wrapper--> https://maps.google.com で住所を入力して、鎖のようなアイコン（リンク）をクリックし、「ウェブサイトへの地図埋め込み用 HTML コード」を取得する。（カスタマイズしたい場合は、「埋め込み地図のカスタマイズとプレビュー」をクリック） 追加情報 現在は Google Map が変更されてこれを書いたときとは少し違っています。「新しいバージョンの地図の場合」に少し追記しました。 取得したコードを HTML に貼り付ける。 <div class="map_wrapper"> <div cl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
