Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
Chrome で今見ている Web サイトでどのような技術が使われているのかを調べる拡張機能 BuiltWith Technology Profiler
Web 開発者の方であれば今開いている Web ページにどのような技術が利用されているのか気になる事がありますよね。ソースを表示したり Developer Tools を起動したりして調べるのも良いですがさくっと確認するだけであれば BuiltWith Technology Profiler という拡張機能を利用するのが便利です。 この拡張機能を入れるとメニューバー上にアイコンが表示されるので、調べたい Web ページを開いてアイコンをクリックするだけです。 例えばこのブログだと上記のような感じに表示されます。 かなーり縦に長いので文字で書きますが以下のような情報を取得しています。 Web サーバの種類, バージョン ネームサーバ ホスティングしているサーバ CMS の種類, バージョン 使用しているフレームワーク 広告の種類 ユーザ統計情報(Google Analytics 等) Jav
【朗報】Chrome OSウィンドウ内でLinuxが動く！Chromebookがますます便利に！！ | ソフトアンテナ
Googleの開発する「Chrome OS」のウィンドウ内部でLinuxが実行可能になったことが分かりました(9to5Google、gigot)。 この情報はGoogleのFrançois Beaufort氏がGoogle+で明らかにしたもの。開発モードに設定したChromeデバイスに、Croutonと呼ばれるツールとChrome拡張を導入することで、好みのLinuxディストリビューションがウィンドウ内部で実行可能になるというものです。以前からChrome OSでLinuxを動かす方法は存在しましたが、今回の方法は、シームレスにサイドバイサイドでChrome OSとLinuxを実行できるところが優れています。 具体的な導入方法は以下の通り。 Chromeデバイスを開発者モードに。 Crouton Integration Chrome Extensionを導入。 croutonをインストール
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
業務スピードが上がる！Google Chromeのおすすめ拡張機能9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。GoogleChrome（グーグル・クローム）をこよなく愛する男、鮫島です。 仕事でもプライベートでもChromeを使いまくっているのですが、今回は超絶便利なChromeの拡張機能（エクステンション）をいくつかご紹介します。 これを全て使いこなせれば、業務の効率は確実に上がるので、特にWeb制作のディレクターの方にオススメですよ！ もちろんディレクター以外の人も使える拡張機能はたくさんあるので参考になれば！ そもそもGoogleChromeの拡張機能（エクステンション）ってなんなの？ 一言で言うと、Chromeに機能を追加するためのもの。Chromeにはいろいろな拡張機能が用意されていて、インストールすると、ページ全体のキャプチャを撮ったり、不必要な広告をブロックしたりする機能を追加できます。GoogleChromeのデフォルトの機能で物足りない方にオススメです。人によっては、
私が愛用している Chrome拡張機能 おすすめ14選 - ネットの海の渚にて
今回は私が実際に使っていて便利だなぁと日頃思っているおすすめのChrome拡張機能を紹介します。 Google Mail Multi-Account Checker https://chrome.google.com/webstore/detail/google-mail-multi-account/mcpnehokodklgijkcakcfmccgpanipfp メインのアカウントとSNSやブログ関係のアカウントを使い分けているのでこれが無いとめちゃくちゃ不便。これのおかげでメーラーアプリはめったに立ち上げなくてもよくなりました。 HD for YouTube™ HD for YouTube™ - Chrome Web Store YouTubeを開くと強制的に最高画質に変更してくれる優れもの。 ちょっとの手間だけどあったらやっぱり便利。 Speed Dial [FVD] Speed D
コード作成やデータ編集作業など、マイナーだけどすこぶる便利なChromeアプリを一挙まとめ | ライフハッカー・ジャパン
最近、めまぐるしい成長っぷりを見せているChromeアプリストアの「オフラインアプリ」たちですが、残念なことにその多くが知名度を得られていない状態になっています。そこで今回は、米Lifehackerお気に入りの知られざるアプリたちをいくつか紹介してみたいと思います。 Googleはここ最近、Chromeウェブストアにオフラインアプリを数多く投入してきています。オフラインアプリとは、PCにインストールしたアプリさながらに、Chormeブラウザ内で使えるアプリのこと。Chromeブラウザがインストールされているパソコンであれば使えるので、借り物のノートPCや容量が少ないPCで作業する際にもかなり便利です。 全てのアプリがオフライン作業に対応しているわけではありませんが、オフライン使用が可能なものも段々と増えてきています。つまり、大量の容量を必要とするデスクトップソフトウェアの代替として、オフラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeのメモリを自動開放してくれる拡張機能「Tab Memory Purge」 | フリーソフトラボ.com