Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能
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
絶対速くなる？！メモリの少ないPCでChromeを高速化する方法 - スネップ仙人が毒吐くよ
いまだ調子が上がらず半夢遊病状態ですよ。 snep1000.hatenablog.com で、前回書いているように右手の腱鞘炎が再発。となると、性能の低いノートPCの出番だったりして…… snep1000.hatenablog.com 操作は多少楽になるとはいえ、性能が低いので主にブラウザを使ったルーチンワークの能率はダダ下がりである。 ブラウザはGoogle Chromeを使用している訳だが、こいつがとにかく重い。 以前は比較的軽いFirefoxを主に使用していたが、Androidのスマホを使っていたり、各種Googleのクラウドサービスとの連携を考えると今日ではChromeを使わざるを得ない。 以前は違うブラウザを使っていたのに今ではChromeを使っている人、自分以外にも多いと思う。 てなわけで、いやいやながらもChromeを使うしかないのだが、本当に糞重い。皆言ってるけどメモリ消費
CSSの修正が捗る「リアルタイムコーディング」とは
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo
Chrome DevToolsでjavascriptをデバッグする際に忘れてはいけない大切な事 - Qiita
Chrome DevToolsはとてもとても便利で、毎日お世話になっている神ツールです。 単純なHTMLの解析からGPUの使用具合というマニアックな情報まで色々確認出来ますが、その中でデバッグの時に設定しておく事で、ちょっとしたミスを減らして問題にすぐ気付ける設定が１つあります。 javascriptエラーが発生した場合にエラーを補足しBreakする Sourceタブを選択した場合に、左下にメニューがあります。 その中の機能としてボタンっぽいがあります。 これを、1回クリックします。するとという感じで色が変わります。次にもう一度クリックします。するとこんな感じで色がまた変わります。 これらを設定しておくと、javascript実行時に発生したエラーをDevToolが検知してBreakしてくれるので、すぐに問題のあるコードに気がつく事が出来、ミスにすぐ気がつく事が出来ます。 Pause on
Google Map をレスポンシブ対応に | Web Design Leaves
<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
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
ChromeのデベロッパーツールでCSSの未使用セレクタを調べる方法
Google Chromeのデベロッパーツール で現在閲覧中のページでロードされて いるCSSファイルから未使用のセレクタ を調べる、という方法です。こんなの Web制作者にとって常識だろ、みたい な内容だったらごめんなさい。 今更感あふれる内容ですけど、Chromeのデベロッパーツールで閲覧中のページで読み込まれているCSSからそのページで使用されていないCSSルールを調べる、という方法。 と言うかただの標準機能の紹介です。便利かどうかは使わないと分からないと思うのでテストしてご判断下さい。 手順 F12でデベロッパーツール開いてAudit（監査）っていうタブを選択し、Runで調査ツールを実行します。 ↑ 直ぐに解析は終わると思います。赤い枠の「Remove unused CSS rules」という部分が未使用のCSSルールです。 ↑ ファイルごとに調査結果が出ます。三角のマークをクリッ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
これはすごい！Chromeの履歴が見違えるほど使いやすくなるエクステンション「Better History」 - Chrome Life
ChromeのシェアがFirefoxを抜いたことで、メインブラウザとして乗り換える人も増えてきたように思います。 そんな人からは、Chromeは軽くてシンプルなので使いやすいという声をよくききます。 しかし、Chromeがリリースされた当初は、あまりにも機能が少なくてこれだけで使い物になるのか？と疑問に思っていた時もありました。 それが今では、Chrome自体の機能も他のブラウザに匹敵するぐらい使えるものに進化したのには正直驚いています。 筆者は、今のChromeで十分満足しているのですが、ただ１つだけ不満な機能があります。 それは、 Chromeの履歴機能が貧弱すぎる！ という点です。 Chromeでアクセスしたページの履歴が確認できる機能なのですが、画面を見てみるとわかるように手を抜いて作ったのではないかと疑ってしまうぐらい貧弱ですw 履歴が新しい順で並んでいるだけで、検索機能はありま
Chromeの拡張機能のEXIF Viewerが大変便利 - ARTIFACT@はてブロ
とOperaの妙な機能をアピールしたら、Chromeの拡張機能でそういうのがあるよと教えていただいた。 EXIF Viewer - Chrome ウェブストア これは画像の上にカーソルを重ねるとEXIFが表示されるという更に便利なもの。今までは画像が気になったら、右クリックして…という動作だったんだけど、EXIFデータがないものも多いので、EIXFデータの有無がわかるというのがすごい便利。 更に位置情報があると、Google Mapsを表示してくれる親切っぷり。 カロシーのブログ Google Chromeの拡張「EXIF Viewer」 このブログ経由で知ったのだけど、EXIFデータの好きな部分を表示することも細かく設定ができる。 ※追記：より詳細にEXIFを表示してくれる拡張機能があった Chromeで手軽にExif情報を確認できる拡張機能「Jeffrey's Exif viewer」
【ネット速読の達人ワザ読者向け】Google Chromeでインストールしている9つの機能拡張 - ネタフル
オススメしているのですが、なんとも難しいタイミング（入稿とMac OS X Lionリリース）が重なり、オススメしているSafari機能拡張「SafariStand」が動かなくなったりしています（新バージョンが開発中）。 そのため、個人的にGoogle Chromeで様々な機能拡張を試しつつ、Safari時代の環境を再現しようとしておりまして、試行錯誤しつつインストールしている機能拡張を【ネット速読の達人ワザ読者向け】として公開しておきます。参考になれば幸いです。 ////// 特に「SafariStand」の代替として使用しているのは、以下のような機能拡張です。 1：Create Link ワンクリックでHTMLリンク、タイトルとURL、などを取得することができます。生成するリンクはカスタマイズ可能です。 関連記事：ページタイトルやURLをコピーするGoogle Chrome機能拡張「C
Google Chromeで検索結果を常に新しいタブで開く方法 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefox、Google Chromeをリセットする方法
MacIous.com is for sale | HugeDomains
ソニック速報
re-dzine.net situs togel online toto 2023 -
紹介したいサイトを好きなサイズにキャプチャして画像つきリンクを簡単に作成できるChrome拡張機能「kwout」｜男子ハック