Chrome DevToolsを使ったフロントエンドパフォーマンス改善 | 株式会社PLAN-B
自社プロダクトのフロントエンド開発に携わっている山口です。 社歴が長いこともあって関わったプロダクトはたくさんありますが、1番長く関わっているのはSEARCH WRITEです。今回はSEARCH WRITEで行ったパフォ… 本記事ではChrome DevToolsのPerformanceパネルを使って実際のプロダクト開発で行ったパフォーマンス計測と改善の記録をまとめました。 パフォーマンス改善の対象SEARCH WRITEはVue.jsで作られたSPAで、バックエンドとのデータのやり取りはVue.jsを介して行います。 今回のパフォーマンス改善の対象ページでは、Web APIから受け取ったデータをもとにリストを表示しています。 データの表示件数は、ある値をしきい値として制限していましたが、そのしきい値を解除してほしいとの要望がありました。 そのしきい値はバックエンド側で制御しているもので、
Selenium と Playwright の両方を使ってみた感想 - 新しいことにはウェルカム
WebのクローリングにPuppeteerを使っています。 いつかPuppeteerの使い方をまとめたいなと思っていたのですが、そうこうしている内に月日は流れ、Puppeteerと同様のブラウザ操作ツールとして、Playwrightの名前をよく聞くようになってきました。 ならばいっそのこと、新たにクローラーを書く時はPlaywrightに乗り換えて、その使い方をまとめようかなと思い始めました。 一方、ブラウザ操作ツールとしてSeleniumも有名です。 Microsoft Power AutomateでSeleniumが使えると聞いたので、Seleniumならクローリングだけでなく、日々の業務の自動化にも使えて便利かなとSeleniumにも興味がありました。 SeleniumとPlaywright、どちらにしようかと迷ったのですが、どちらも使ったことがなかったので結局両方を使って確かめること
フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closure Tools DevTools" という Google Chrome 向け拡張機能を作成しました。 作成した DevTools は kintone に限らず利用することができるため、Chrome ウェブストアで公開しています。 chrome.google.com ソースコードも次のリポジトリでご確認いただけます。
ブラウザにおけるメモリリークを解決するために読んでおけると良い資料 - mizdra's blog
最近趣味や仕事の Web アプリケーションでメモリリークに遭遇して、頑張ってメモリリークの原因を突き止めて修正する、ということがあった。その過程でメモリリークについて色々調べて知見が溜まったので、学習資料の紹介という形でアウトプットしてみる *1。 前置き 紹介する記事がかなり偏っていることに注意 冒頭で触れたメモリリークを解決するために読んだ記事をまとめただけなので、内容にそれなりの偏りがある 例えば id:mizdra が遭遇したメモリリークは全てブラウザ上で発生していたものだったので、これから紹介する内容も主にブラウザにおけるメモリリークに焦点を当てたものになる GC がどうメモリをどう解放しているか、何故メモリリークが発生するのかは全てカット 調べれば色々な記事が出てくるので、必要に応じて読んでください 基本的な知識を抑える まずメモリリークとメモリ撹拌の違いを学ぼう どちらも同じ
【拡張機能不要】PCで開いているWebページを今すぐスマホで開く方法
PCとスマホの間で手軽にWebページを共有したい PCやスマートフォンなど複数の端末でGoogle Chrome（以下、Chromeと略）を使っていると、ある端末で開いているWebページを別の端末で今すぐ開きたい、ということはありませんか？ 例えば、通勤電車で読んでいたWebページの続きを、出社後にPCで読みたい、あるいはPCで制作・修正中のWebページをスマートフォンの実機で表示・確認したい、といったような場合です。 最新のChromeで、かつ利用中の端末同士でChromeの同期を設定済みなら、数ステップの操作でページURLを別の端末に送信し、そのWebページを開くことが可能です。専用の拡張機能を追加したり、あるいはWebページの閲覧履歴から対象ページを探したりする必要はありません。 本稿では、Windows OS／iPhone（iOS）／Androidの各Chromeを対象として、UR
【完全版】Google Chrome（クローム）ショートカットキーまとめ【Windows／Mac】 | Beyond（ビヨンド）
Chromeショートカットキー（表示） （1）ダウンロードページの表示 Windows：Ctrl＋J Mac：Command＋Shift+J 下記にショートカットキーを使用した直後に表示されるダウンロードページを表示しました。今回の画面にはダウンロードされているファイルはありませんがダウンロードされているファイルが存在すれば表示されます。 （2）HTMLソースの表示 HTMLとはPC上での文章（ハイパーテキスト）を構成するための言語のようなものです。次のショートカットでHTMLソースを開けます。 Windows：Ctrl＋U Mac：Command＋Option+U HTMLソースを表示することでPC上での文章がどのように構成されているかを知れるので文章を作成したいと考えている人には便利なショートカットキーとなっています。 （3）タスクマネジャーを表示 タスクマネジャーとはCPUやメモリの
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
【小ネタ】Visual Studio CodeのDebugger for ChromeでCORSを無効にする【備忘録】 | DevelopersIO
せーのでございます。 CORSを無効にしながらデバッグするのに意外と手間がかかったので、忘れないように書いておきます。 何をしたいのか Visual Studio Code(VSCode)でJavaScriptやTypeScriptの開発をする際にブラウザを使ったデバッグをしたい時があります。 そんな際に「Debugger for Chrome」という拡張機能を使うと、Chromeブラウザを使ってデバッグができます。 一方、Angularやreactなどのフロントエンドスクリプトをデバッグする際にはローカルホストでサイトを立ち上げますが、サーバーサイドAPIからデータを取得する際にCORSに引っかかってしまうため、CORSを無効にする必要があります。 ChromeにはCORS Unblockなどのextensionがあり、それをインストールして有効にしておけばCORSを回避できる、、、と思
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
Selenium使いのためのPuppeteer解説 - Qiita
過去に https://qiita.com/okitan/items/00b677df1a941a1e0ba0 を書きました。 当時は、DockerもなくCI環境においてブラウザを動かす（それも複数）のはそれなりの苦労があり、PhantomJSを使う選択肢もあるよ（挫折するよりはある程度妥協してCIを実現したほうがいいよ）というのを提示するために書いたものでした。 時はたち、昨日のアドベントカレンダー(https://qiita.com/re-fort/items/7875d317d406e66072e7 )にもあったようにDockerを使って簡単に環境を作ることができるようになってきました。 今回Selenium使い向けにPuppeteerを紹介する意図としては、クロスブラウザテストをやらないんであれば Seleniumを使わない選択肢もあるよというのを提示できればと思っています。 Pu
Windows環境でSeleniumからHeadless Chromeを動かしてみた | DevelopersIO
はじめに DI部のおおたきです。Headless ChromeがWindowsをサポートしたのでWindows上で動かしてみました。 環境 Windows7 Google Chrome 62.0.3202.75 Python 3.6.3 Pleiades 4.7.1 準備 Pythonはすでにインストールしてある前提で進めたいと思います。まずpipでライブラリをインストールします。 C:\Users\ootaki.kentaro>pip install selenium Collecting selenium Using cached selenium-3.6.0-py2.py3-none-any.whl Installing collected packages: selenium Successfully installed selenium-3.6.0 次にWebDirverをここか
Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita
Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目の変更 赤枠で囲んだ部分を右クリックすると こんな感じでメニューが出てくるので表示したい項目をクリックする 項目の一例 Name：リソースの名前 Method：HTTPメソッドの種類 Status：レスポンスのステータスコードとテキスト Type：リソースの
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - Front End Developer Playground & Code Editor in the Browser
Androidをパソコンで操作する方法! USB接続でPCに画面/内部音声をミラーリングしよう