Chrome DevTools の知っておくと便利かも機能 - Qiita
長い間 Chrome の DevTools を使ってきて、便利だなと思った機能をまとめてみました。 様々な機能があり、これを覚えておくと開発時に役に立つかもしれないので、ぜひ使ってみてください。 この記事は Corome DevTools 公式 を参考にしています。 日本語化 英語が苦手な方は日本語化しましょう。 手順 DevTools を開いたら、歯車マークをクリック Language で日本語を選択 [Reload DevTools] をクリックして DevTools のリロードをする 要素の状態を強制 指定の要素を :hover や :focus などの状態に強制的にすることができます。 そうすることで指定状態時のスタイルを確認することができます。 手順 要素タブをクリックする 状態を変更したい要素を選択する 今回は Google の検索フォームを選択 [:hov] をクリックする
chrome devtools の tips N連発 - mizdra
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
いつもの作業が5秒速くなるツールをひたすら列挙するページ
筆者が愛用してやまない作業高速化ツールたちに感謝しながら、ひたすら列挙するページです🙏 Mac専用 Alfread 多機能ランチャ ファイル検索 クリップボード履歴の保存がめちゃくちゃ便利（有償版） Clipyとかも試して、有償版Alfredが一番しっくりきた クリップボード履歴を保存 履歴が残る 筆者は Cmd + Shift + V で発動するよう設定 画像コピーの履歴も保存 履歴の検索 クリップボードでコピーしながらマージできる マージしたい文字列は、「空白区切り」「改行区切り」「区切りなし」を選べる コーディングが捗る スニペット機能（https://zenn.dev/naotolog さんご紹介🙏） 定型文を登録して、呼び出すことができる 穴埋め入力が必要ない場合は Dash よりこちらが良さそう Station 通知の一元化 Slack/Twitter/Facebook/G
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
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
絶対速くなる？！メモリの少ないPCでChromeを高速化する方法 - スネップ仙人が毒吐くよ
いまだ調子が上がらず半夢遊病状態ですよ。 snep1000.hatenablog.com で、前回書いているように右手の腱鞘炎が再発。となると、性能の低いノートPCの出番だったりして…… snep1000.hatenablog.com 操作は多少楽になるとはいえ、性能が低いので主にブラウザを使ったルーチンワークの能率はダダ下がりである。 ブラウザはGoogle Chromeを使用している訳だが、こいつがとにかく重い。 以前は比較的軽いFirefoxを主に使用していたが、Androidのスマホを使っていたり、各種Googleのクラウドサービスとの連携を考えると今日ではChromeを使わざるを得ない。 以前は違うブラウザを使っていたのに今ではChromeを使っている人、自分以外にも多いと思う。 てなわけで、いやいやながらもChromeを使うしかないのだが、本当に糞重い。皆言ってるけどメモリ消費
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし
Windows8.1 で Chrome を DPI スケーリングに対応した鮮明な表示にする方法
Thinkpad8 のような高解像度な Windows8.1 マシンで DPI スケーリングを 100% 以外に設定すると、DPI スケーリング非対応なアプリの文字表示がボケてしまい非常に不鮮明で見づらく、どうしたもんか悩んでました。特にメインブラウザとして常用している Chrome の非対応は致命的でした。 エンジニアなら当たり前のように開発用にメインブラウザは Chrome を使っていることでしょう。例に漏れず僕も同じで、既に Internet Explorer にはどうしても戻れない体になってしまっているので、Windows8.1 でもメインブラウザは変わらず Chrome でいきたいわけです。 一つ前のエントリでもご紹介しましたが、僕にはこの違いがどうしても許容できません。 いろいろ調べた結果、ネットで対処方法としてよく紹介されている方法は下記の方法です。 つまり、アプリを強制的に
AndroidアプリをPCで動作させる方法――ARC Welderの使い方を解説
グーグルはChromeブラウザが対応するOSであれば、AndroidアプリをPCで利用できる「ARC Welder」を一般向けにリリースしました。 ARC Welderとは？ グーグルは、昨年9月にAndroidアプリをPCで動作可能にする「App Runtime for Chrome（略称ARC）」を発表し、PCで動作するAndroidアプリとしてVineやEvernoteなどをChromeウェブストアにてリリースしていました。 ただ、この機能が利用できるPCは、グーグルが開発するPC向けのChrome OSを搭載する「Chromebook」のみで、WindowsやMacなどで利用することはできず、さらに、一部の開発者のみが利用できたため、公開されているアプリがかなり限られていたことから、実際に使ってみた人はかなり少なかったと思います。 そんな問題を解決するのがグーグルが発表した「ARC
Chromeは通信量を50%も節約できるなんて知りませんでした。格安SIM運用に最適なブラウザかも。 - いつもマイナーチェンジ！
言わずと知れたブラウザであり、僕も利用している Google Chrome ですが、通信量を50%節約できる設定があります。 僕はずっと iPhoneユーザーで、スマホのブラウザといえば Safari を利用していたので、Chromeの情報はあまり気にしてなかったのですが、この節約機能は 2014年1月頃のアップデートから利用できるようになったようです。 リリースから１年も知らずにいたとは^^; 何にしてもとてもすばらしい機能なので、記事に残しておきます。 まずはやり方を Androidの場合 iPhoneの場合 これだけです。 たったこれだけで、画像にもあるように50%程の通信量を節約できます。 なんという簡単設定。 なぜ通信量が節約できるのか簡単に言うと、「画像の圧縮と最適化を行うから」です。サイトの読み込みで一番時間がかかるのは、なんといっても画像です。その画像を更に圧縮してくれると
Chromeが重くなった時にやるべきこと
Google Chrome は軽量で高速なWebブラウザーですが、長く使っていると「重い」と感じるようになってくることがあります。 この記事では「Chromeが重くなった時にやるべきこと」についてまとめています。 1. シークレットウィンドウによる問題の切り分け 最初に書いておきますが、どんなWebブラウザーでも、拡張機能（アドオン/エクステンション）をたくさん入れたり、履歴やキャッシュが溜まってくると重くなるのは必然です。 「最近新しくセットアップした PC なのに Chrome が重い」という方もいらっしゃるかもしれませんが、Chrome を使用して Google にログインした時点で、以前使用していた拡張機能などが再びインストールされるため注意が必要です。 Chrome が拡張や履歴などのせいで重いのか、PC や Chrome そのもののせいで重いのかを切り分ける簡単な方法があります
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです（→学会論文）。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表示し
Chrome デベロッパーツールでのJavaScriptデバッグ方法 | Web Tips
公開日：2014年6月24日 最終更新日：2014年7月13日 Chrome デベロッパーツールでは、強力なJavaScriptデバッグ機能をもっています。 ブレークポイント設定やステップ実行で、効率的にバグの原因を見つけることができます。 【コンテンツ】 パネル外観 ブレークポイントを設定する サイドバーにある各ペインの説明 【記事執筆時の環境】 Windows 7 Professional 32bit SP1 Google Chrome 35 パネル外観 JavaScriptのデバッグは、Sourcesパネルで行います。 右サイドバーには一番上に実行を制御するボタンがあり、その下にデバッグ情報がいくつかのペインに分かれて表示しています。 各制御ボタンの説明は以下になります。 ：Pause script execution(F8) 実行を停止します。 ：Resume script exe
Chrome DevToolsでjavascriptをデバッグする際に忘れてはいけない大切な事 - Qiita
Chrome DevToolsはとてもとても便利で、毎日お世話になっている神ツールです。 単純なHTMLの解析からGPUの使用具合というマニアックな情報まで色々確認出来ますが、その中でデバッグの時に設定しておく事で、ちょっとしたミスを減らして問題にすぐ気付ける設定が１つあります。 javascriptエラーが発生した場合にエラーを補足しBreakする Sourceタブを選択した場合に、左下にメニューがあります。 その中の機能としてボタンっぽいがあります。 これを、1回クリックします。するとという感じで色が変わります。次にもう一度クリックします。するとこんな感じで色がまた変わります。 これらを設定しておくと、javascript実行時に発生したエラーをDevToolが検知してBreakしてくれるので、すぐに問題のあるコードに気がつく事が出来、ミスにすぐ気がつく事が出来ます。 Pause on
Webサイトで利用されているフォントを調べられる「Fontface Ninja」
Webサイトを見ていると、そのWebサイトで利用しているフォントが気になる人もいると思いますが、そのフォントの名前などを調べるのは難しい場合もあると思います。そんな時に利用すると便利なのが「Fontface Ninja」です。 Fontface Ninjaはブラウザに拡張機能を入れることで、ブラウザで表示されているWebサイトのフォントを調べられるツールです。例えば、Chromeに拡張機能をインストールするとブラウザの右上にFontface Ninjaのアイコンが表示されます。 これをクリックした後、Webサイトの文字にマウスをあてると、そのフォントの名前などが表示されます。 またWebサイトの文字だけの表示したりフォントによっては、そのフォントをダウンロードもできるようです。 Webサイトの制作をされている方は、フォントが気になる方もいらっしゃると思います。このツールを利用して気になるW
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Chrome」からWindows/Mac/Linuxへリモート接続！ Googleが公式提供する無償ツール【レビュー】 - 窓の杜
chromeの爆裂的なメモリ消費をなんとかする拡張 * prasm（プラズム）
MacIous.com is for sale | HugeDomains
ソニック速報
