DevTools

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

この記事は、 PLEX Advent Calendar 2024の3日目の記事です。 こんにちは 株式会社プレックスでWebアプリケーションの開発をしているtetty0217 です。 はじめに 皆さんはどのようなタイミング・方法でWebフロントエンドアプリケーションのモバイルビューを開発・デバッグしているでしょうか。 PCブラウザのレスポンシブモードを使って開発したり、QA期間に実機端末でデバッグしたりなど様々でしょう。 本記事はその実機端末に近い環境であるiOS SimulatorとAndroid Emulatorを使用してアプリケーションをデバッグするための環境をセットアップすることにフォ…

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

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

React Queryのメリット React Queryの書き方 React Queryの使いどころ React Queryのメリット React Queryは、Reactアプリケーションでデータの取得、管理、キャッシュなどを簡単に行うためのライブラリです。 React Queryのメリットはいくつかあります。1. 簡単なデータ管理: React Queryは、APIからデータを取得し、キャッシュし、更新するためのシンプルで一貫したAPIを提供します。 これにより、複雑なデータフェッチロジックをシンプルかつ効果的に実装できます。2. 自動キャッシュと再取得: React Queryは、データの…

Edgeで開発者ツール（DevTools）の開き方について以前少し戸惑ったことがあるためここにまとめて書き残しておきたいと思います。 (adsbygoogle = window.adsbygoogle || []).push({}); 目次 １．開発者ツールを開く方法 １．開発者ツールを開く方法 開発者ツールを開く方法はおよそ以下のリストのような方法があります。 これらの方法がありますが、バージョンアップがあるタイミングなどで時々刻々開き方が変わったり、名称が変わったりしていますので１つの方法でできなかった場合にはほかの方法を試してみてください。 table { border-collapse…

この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。 昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。 Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子 このことを知ったのは、10MB くらいある JavaScript ファイ…