DevTools

DevToolsでできること｜ネットワーク・コンソール・パフォーマンスを完全理解 Web開発において、ブラウザの開発者ツール（DevTools）は欠かせない存在です。本記事では、特に利用頻度の高い「ネットワーク」「コンソール」「パフォーマンス」タブに絞り、それぞれの使い方や読み取り方、知っておくべき周辺知識をまとめて解説します。 1. DevToolsとは？ DevTools（デベロッパーツール）は、ブラウザ（主にGoogle Chrome）に標準搭載されているWeb開発・デバッグツールです。要素検証、ネットワーク通信、エラー確認、パフォーマンス測定、レスポンシブ表示テストなど、さまざまな機能…

はじめに こんにちは！クライアント開発チームの安野です。 クライアント開発チームでは、クライアントポータルという to B 向けのサービス開発を担当しており、私はそこでフロントエンド・バックエンドの開発に携わっています。 クライアントポータルの内容はこちらからも確認できるので、ご興味があれば是非ご一読いただけますと幸いです！ square.visasq.com そんなクライアント開発チームですが、先日 Nuxt の更新を行いました。 tech.visasq.com 更新に伴ってNuxt Devtools も利用可能となったため、それが持つ機能やどんなことができるのか調べてみました。 Nuxt …

こんにちは、Plex Job 開発チームの高岡です。 以前投稿した「Web パフォーマンス改善に向き合っていくお話」の記事の続編として、弊社のPlex Job サイトを対象に、Google Search Console で検知された CLS 不良ページの改善を行ったので、今回はその具体的な Tips をお話ししたいと思います。 product.plex.co.jp 対象読者 背景 Google Search Console での不良ページの検出 Vercel Speed Insights で特定のページを絞り込む Lighthouse を使用したパフォーマンス計測 Lighthouse での計…

こんにちは、Plex Job開発チームの高岡です。 この記事は、 PLEX Advent Calendar 2024の16日目の記事です。 以前投稿した入社エントリーでReactにおけるパフォーマンスチューニングについてお話する旨を記載してから、早半年が経過しました... そのお話をする前に、パフォーマンス改善に向き合うための基礎知識をまとめましたので、こちらからお話ししていきたいと思います。 Reactでのパフォーマンス改善の具体的なお話は気長にお待ちいただけますと嬉しいです 🙏 対象読者 パフォーマンスに興味を持ち始めた方 Webパフォーマンスの指標を勉強したい方 対象読者 背景 Webパ…

遅いネットワークのテストをするのに便利な方法があります。 ChromeブラウザのデベロッパーツールでNetworkタブ→No throtting→3Gとすると、遅い通信で利用できます。 ネットワークスロットリング

こんにちは、カスタマーサクセスエンジニア（CSE）の komo です。 この記事では CSE の主業務の１つにテクニカルサポートがありまして、それを効率化するために作ったツールの話をします。 具体的には Google Chrome 拡張機能で DevTools に独自パネルを追加して、トラブルシュートに有用な情報を表示させるツールです。実物をそのまま紹介はできないため、ひな形を別途作りました。作り方を書くので、同じようなカスタマー系エンジニアの方々に真似してもらって、役立ててもらえると嬉しいです。 ツールの説明 ひな形からの発展形 作り方 ステップ1：最小の拡張機能を作る ステップ2：パネルを…

EclipseでVue.jsを使うためのセットアップ EclipseでVue.jsを便利に使うためのプラグイン EclipseでVue.jsを使うためのセットアップ EclipseでVue.jsを使うためのセットアップは、基本的にはVue.jsプロジェクトを作成し、Eclipseでそのプロジェクトを開くという手順になります。 以下は一般的な手順です。1. Vue.jsプロジェクトを作成します。 これには、Vue CLI（Command Line Interface）を使用するのが一般的です。 ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します。 npm install -g @…