ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ
フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識 | 翔泳社
現場で役立つテスト手法を基礎から解説！ 「どこから」「どうやって」手をつければよいかわかる 本書は、Webアプリケーション開発に携わるフロントエンドエンジニアを対象に、「テスト」の基本知識と具体的な実践手法を解説した書籍です。 高度な機能を画面上で提供する現代のWebアプリケーションでは、その品質や保守性を担保するうえで、フロントエンドにおける自動テストが重要な役割を持ちます。 本書はそんな「フロントエンドにおけるテスト」をテーマに、基本的なテストコードの書き方や、目的に応じたテスト手法・ツールの使い分け方を解説します。「UIコンポーネントテスト」や「ビジュアルリグレッションテスト」など、フロントエンドならではの具体的なテスト課題に重点を置いており、基本から実践まで必要な知識を体系的に身につけることができます。 解説はサンプルWebアプリケーション（Next.js）を舞台にしたハンズオン形
Storybook 7.0
Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at Monday.com, The Guardian, Intuit, and many others due to its unparalleled framework compatibility and rich features for development, documentation, and testing. Today, I’m excited to announce Storybook 7 (SB7), our first major release in over two years and by far our largest ever. It includes: ⚡ First
Fixing a Memory Leak in a Production Node.js App
Fixing a Memory Leak in a Production Node.js AppJanuary 12th, 2023 — 15 min read A few months ago, I wrote about my migration from Postgres to SQLite. I ended that with a "to be continued" because I had a number of issues related to memory and CPU spikes that I couldn't really explain. For a while I thought it was bugs in LiteFS (which I'm using to get distributed SQLite for my distributed node ap
GitHub - facebook/memlab: A framework for finding JavaScript memory leaks and analyzing heap snapshots
memlab is an end-to-end testing and analysis framework for identifying JavaScript memory leaks and optimization opportunities. Online Resources: [Website and Demo] | [Documentation] | [Meta Engineering Blog Post] Features: Browser memory leak detection - Write test scenarios with the Puppeteer API, and memlab will automatically compare JavaScript heap snapshots, filter out memory leaks, and aggreg
Release v6.5.0 · storybookjs/storybook
Storybook 6.5 is here!! 🎉🎉🎉 SB6.5 adds new testing and design review workflows while improving core performance and compatibility. 🤖 Interaction testing simulate interactions and run assertions in the browser 🎨 Figma plugin to connect stories to variants 🏎️ Webpack 5 lazy compilation for faster start up ⚡ Vite builder for near instant rebuilds 💯 Hundreds more fixes and quality of life impro
Introducing Ladle | Ladle
Ladle is a tool for developing and testing your React components in an environment that's isolated and faster than most real-world applications. It supports Component Story Format – a concept widely popular thanks to Storybook. In fact, Ladle has been developed as a drop-in replacement of Storybook – it should already work with your existing stories. Storybook ❤️At Uber, we are big fans of Storyb
DevTools の Web 技術でできている部分を覗き見る - polamjaggy
この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。 昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。 Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子 このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出
フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closure Tools DevTools" という Google Chrome 向け拡張機能を作成しました。 作成した DevTools は kintone に限らず利用することができるため、Chrome ウェブストアで公開しています。 chrome.google.com ソースコードも次のリポジトリでご確認いただけます。
WeakRef と console.log
ES2021 に入った WeakRef を実験したらハマったのでメモ WeakRef - JavaScript | MDN WeakRef: JavaScriptに弱参照がやってくる（ついでにFinalizationも） - Qiita tl;dr devtool を開いた状態で console.log すること自体が参照になる WeakRef で取得した参照を console.log すると、それも参照なので、本来開放されるはずでもリソースの開放が行われなくなる 循環参照オブジェクトでも、内部での循環参照に閉じてる限りちゃんと捨てられる(少なくともv8は) 確かめたこと 循環参照のオブジェクトの GC がなされず困っていたので、確認のために色々と実験していた。 まず、循環参照オブジェクトを作る。この Node は再帰的に辿れるように、 parent と children で相互に参照を持
Storybook 6.3
Storybook is the industry-standard UI development workshop for components and pages. It's used by Dropbox, Shopify, Stripe, and thousands more teams. Developers choose Storybook because it helps them focus on one thing: the user interface. There's already a mountain of complexity in app development, Storybook makes your job simpler by isolating UI concerns from the noise of backend, APIs, and data
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook 8
Storybook 8 Beta
Storybook 7.1
OPFS Explorer - Chrome Web Store
Storybook 7.0 beta
GitHub - t3-oss/create-t3-app: The best way to start a full-stack, typesafe Next.js app
GitHub - tajo/ladle: 🥄 Develop, test and document your React story components faster.
Release v6.4.0 · storybookjs/storybook
Javascript Decorators