ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ
Simple setup: Virtual Screen Reader in Storybook
How to set up Storybook with Guidepup's Virtual Screen Reader and test what the screen reader speaks Recent changes to the @guidepup Virtual Screen Reader library make it ridiculously easy to integrate into Storybook for use in your integration tests. This article shows how to get the basic setup going and how to write your first screen reader test in Storybook. tl;dr The Virtual Screen Reader is
Storybook 8
Storybook is the industry standard UI tool for building, testing, and documenting components and pages. It’s used by thousands of teams globally, integrates with all major JavaScript frameworks, and combines with most leading design and developer tools. Today, I’m thrilled to announce the release of Storybook 8! This latest version of Storybook brings together 8,865 commits across 773 PRs from 218
Storybook Test ruuner で安定した Visual Regression Testing を行う
はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の
Next.js AppRouterのエラートラッキング・ロギング手法で悩む
なお、middleware.ts でリクエストログを出力してDatadogに構造化してもらうデモコードはこんな感じ。console.logでオブジェクトを文字列として出力している（そうすると1レコードにまとめてくれる）。 import { type NextRequest, NextResponse, userAgent } from "next/server"; import { getSession, withMiddlewareAuthRequired, } from "@auth0/nextjs-auth0/edge"; export default async function middleware( request: NextRequest, event: NextFetchEvent, ) { const response = NextResponse.next(); con
Storybook 8 Beta
🚀Update March 12: Storybook 8 is out now!Storybook 8 is now available to try in beta! This latest release continues Storybook’s quest of giving you an instant-on, seamless environment for frontend development. Check out the release highlights and try the beta release today! 🚀 Major performance improvements 🆕 Visual tests workflow 📱 Polished mobile UI 🔬 Improved test utilities ⚛️ React Server
Storybook for React Server Components
React Server Components (RSC) are a new programming model for React-based web UIs. In contrast to traditional React “client” components, they only render on the server. This leads to a variety of performance and security benefits, but it is also a huge departure from the React tools and libraries we use today. One of the most impacted areas is component-driven development and testing. Tools like S
Rustプログラムのデバッグ辛すぎ問題 - Qiita
この記事は Rust Advent Calendar 2023 シリーズ2 の1日目の記事である。 Rustは良くも悪くもシステムプログラミング言語なので、何も工夫しなければデバッグの体験がC言語と同じレベルになってしまう。例えば「rust lldb」でググると上位に Debugging Rust programs with LLDB is a nightmare というスレッドが出てきてしまう。 使うべきツールを知っていれば幾分かマシな体験にできる。Rustコンパイラはデバッガとして LLDB, GDB, WinDbg/CDB をサポート していて、僕はWinDbGは10年くらい触ってないので、この記事ではLLDBとGDBについて書く。 LLDB Apple SiliconのMacだとGDBが使えないので、必然的にLLDBを使うことになる。 CodeLLDB GDBと同じく、LLDBにも
Storybook 7.6
Storybook 7.6 is here! This is the final minor release in the Storybook 7 series. 7.6 improves Storybook’s performance and UX, enhances our integrations with tools across the frontend ecosystem, and paves the way for our next major release: Storybook 8. 🔥 Improved SWC support🧪 New test utilities and fast build mode🔼 NextJS SWC + avif support & fixes🇸 SvelteKit page and navigation mocking⚛️ Rea
What's New in DevTools (Chrome 118) | Blog | Chrome for Developers
New section for custom properties in Elements > Styles The Elements panel now supports the @property CSS at-rule. It lets you define CSS custom properties explicitly and register them in a stylesheet without running any JavaScript. To inspect your registered custom properties, in Elements > Styles, hover over the property name and see its descriptors in a tooltip. In the tooltip, click the link to
技術的負債の解消のためには、“経営層との合意形成”が不可欠。DIGGLE社に学ぶ開発体制構築の秘訣 - what we use（技術スタックデータベース）
DIGGLE株式会社でエンジニアリングマネージャーをしている岡崎と申します。普段はエンジニアチーム全体のマネジメントを担いつつ、開発業務も行っています。DIGGLEは予実管理クラウドサービス「DIGGLE（ディグル）」を提供するスタートアップであり、「RubyKaigi 2023」のスポンサーを担うなどテクノロジーやそのコミュニティへの投資を積極的に行っています。本記事ではDIGGLEのエンジニアチームが、どのように技術的負債解消を行っているかについてご紹介します。 工数の何%を負債解消に充てるかを四半期ごとに経営と合意する技術的負債解消は、エンジニアチーム単体でやり切るにも限界があり、経営陣の理解を得ることが重要です。弊社はCTOが共同創業者であるため、エンジニアの意見が経営陣へダイレクトに届き、経営陣の技術に対する理解度が非常に高いのが特徴となっています。CTOから技術的負債がビジネス
How to Find Infinite Loops in Javascript using DevTools
Infinite LoopExample Project Used https://stackblitz.com/edit/js-vub9fd?file=index.js StepsFind the cause of the infinite loop in the UI (ex: a button click)Open the Performance Tab in the DevToolsClick record Performance Tab is recordingFire the event that is causing the infinite loopNow click stop recordingBut now you will notice that Chrome freezes, and here is the trick Performance Tab freezes
Scroll-Driven Animations Debugger (DevTools Extension)
I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a DevTools extension to visualize and debug Scroll-Driven Animations. ~ Table of Contents Demo Get the extension Backstory Known Issues and Limitations Future Plans Spread the word ~ # Demo To jump right in here’s a video of the extension in action, tested on scroll-driven-animations.style: The extension adds a new
大規模な移行バグを修正するための戦術 - Qiita
こう見たとき、"FileNotFound"のバグが一番多い。と分かりました。そうすると、"FileNotFound"のバグを修正すると、多くの移行エラーが解消され、効率よく移行が進むと考えられます。しかし、現実問題として、それほど直りませんでした。 "簡単なバグ"とは何か？ 前節では、バグの発生頻度が高いものから修正していくとアプローチをしていきましたが、実際問題それほどうまくいきませんでした。端的に、なぜ失敗したか。というと、"バグが直らなかった"からです。仮に"FileNotFound"のバグを直そうとしたとき、2,520個あるログファイルから、ランダムに1つとりだし、どの部分でエラーになっているのかを細かく見ていきます。それで、バグの原因を特定し、直す。という極シンプルなアプローチをするわけですが、「このバグの原因を特定する」ということが、そもそも難しかった。ということです。先にも書
Debugging speculation rules | DevTools | Chrome for Developers
Speculation rules can be used to prefetch and prerender next page navigations as detailed in the previous post. This can allow for much quicker—or even instant—page loads, greatly improving Core Web Vitals for these additional page navigations. Debugging speculation rules can be tricky. This is particularly true for prerendered pages, as these pages are rendered in a separate renderer—kind of like
What's New in DevTools (Chrome 117) | Blog | Chrome for Developers
Network panel improvements Override web content locally even faster The local overrides feature is now streamlined, so you can easily mock response headers and web content of remote resources from the Network panel without access to them. To override web content, open the Network panel, right-click a request, and select Override content. If you have local overrides set up but disabled, DevTools en
Optimizing: Instrumentation | Next.js
import { registerOTel } from '@vercel/otel' export function register() { registerOTel('next-app') } See the Next.js with OpenTelemetry example for a complete implementation. Good to know This feature is experimental. To use it, you must explicitly opt in by defining experimental.instrumentationHook = true; in your next.config.js. The instrumentation file should be in the root of your project and n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - BuilderIO/hydration-overlay: Overlay for hydration errors with explicit diff between renders.
FireDBG - 🔥 Time Travel Visual Debugger for Rust
GitHub - alvarlagerlof/rsc-parser: A parser for the React Server components when sent over the network
