JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
Debug performance in the field | Articles | web.dev
Debug performance in the field Stay organized with collections Save and categorize content based on your preferences. Learn how to attribute your performance data with debug information to help you identify and fix real-user issues with analytics Google provides two categories of tools to measure and debug performance: Lab tools: Tools such as Lighthouse, where your page is loaded in a simulated e
chrome devtools の tips N連発 - mizdra
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
console.logなしでNext.jsをVSCodeでデバッグさせる方法
VSCode で Next.js のデバッグをできるようにしたら開発のデバッグが超絶楽になったのでその方法について紹介していきたいと思います。 ※補足 Next.js vscode debugとかで Google 検索してみると以下のページに引っかかるかと思いますが、Next.js 9 の環境だと動かないので以下のリンクを参考に修正して動作できるようにしました。 https://github.com/microsoft/vscode-recipes/tree/master/Next-js 最終形のコードコードだけ知りたいという方は.vscode/launch.jsonを作成し、以下のコードをコピペで大丈夫です。 例は src 配下のディレクトリ構成の場合ですが、root 直下に pages がある場合は src を削除してもらえれば動作すると思います。 { "version": "0.2.
vscode-recipes/Next-js at master · microsoft/vscode-recipes
Configure launch.json File Click on the Debugging icon in the Activity Bar to bring up the Debug view. Then click on the gear icon to configure a launch.json file, selecting Chrome for the environment: Replace content of the generated launch.json with the following two configurations: { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Next: Chrome", "url":
Configuring: Debugging | Next.js
DebuggingThis documentation explains how you can debug your Next.js frontend and backend code with full source maps support using either the VS Code debugger or Chrome DevTools. Any debugger that can attach to Node.js can also be used to debug a Next.js application. You can find more details in the Node.js Debugging Guide. Debugging with VS Code Create a file named .vscode/launch.json at the root
iOSデバイスだけでHTTP（S）通信がキャプチャできる「Charles Proxy」がリリースされたので試してみた - Qiita
iOSアプリのCharles Proxyがリリースされました これまでもCharlesはWindows, macOS, Linux用のアプリとして存在していましたが、この度iOSアプリの Charles Proxy がリリースされました。 App Storeから購入できます。これにより、iOSだけでパケットをトレースすることができるようになりました。 公式のアナウンスはこちらをご覧ください。 記事執筆時点の機能は以下です。 iOSデバイス上のHTTP（S）通信のトラフィックをキャプチャする SSLプロキシとして機能し、SSL/TLS通信がプレーンテキストで見れる アプリでリクエストとレスポンスの内容が確認でき、個別のリクエストやセッション全体をデスクトップのCharlesに共有できる 使ってみた 早速App Storeで購入してインストールしてみました。 検証環境 本エントリは以下の環境で
webpack, babel, node環境で例外時のスタックトレースに元ソースの場所を表示させる
問題 nodeに読み込ませるソースをwebpackとbabelでコンパイルするようにすると, エラー時のスタックトレースが at Object.eval (webpack-internal:///76:29:7) のような意味不明なものになってしまいます. これはソースマップを有効にしていても起きてしまいます. webpackのissueにも既にこの問題は報告されていましたが. SourceMap don't link to an src file but to webpack-internal:///[LINE_NUMBER] · Issue #5186 · webpack/webpack ｢source mapはブラウザが読み込むものだからnodeは取り扱わないよ｣とownerにすげなく言われています. 解決法 evanw/node-source-map-support: Adds s
iOSでCharlesを導入する | try! Swift Tokyo 2018 Day2-6 - niwatakoのはてなブログ
twitter.com 我々が開発するアプリの多くが、インターネット経由でAPIにアクセスします。macOS上で実行されるCharles Proxyは、iOSからの HTTP と HTTPS のトラフィックをキャプチャできるため、障害をデバッグしたり、パフォーマンスを測定することができます。try!Swift Tokyoでは、Charles Proxy の作者である Karl が Charles for iOS という新しく強力なアプローチを発表します。これにより、あなたのiOSデバイスでトラフィックを直接キャプチャすることが可能となります。 www.youtube.com 追記 (2018/03/28) トークの際には審査中だったCharles Proxy for iOS がリリースされました Charles Proxy XK72ユーティリティ¥1,080 Charles Proxy i
`node --inspect --debug-brk`を使ってE2Eテストをデバッグするのめちゃ便利 - Qiita
当エントリは、Schoo Advent Calendar 2016の9日目として書かれています。 @takoba と申します。Schooのエンジニア兼カレー王子を担当しております。 主にフロントエンドを主戦場としてますが、バックエンドも普通に書いてます。 むしろ最近は比重多めになってきてるので、ぼくを自由にしてくれるバックエンド得意なアプリケーションエンジニアの方絶賛募集中です！！！ そんな中でフロントエンドエンジニアとしての矜持を保つために、今回はE2Eテストのデバッグに便利なツールをご紹介します。 node-inspectorの時代は終わった...？ 先日Schooで取り扱っている某リポジトリで利用していたNode.jsのバージョンを大幅にアップグレードしたときのお話です。 Node.jsのデバッグに多大なる貢献をしてくれるnode-inspectorですが、そのアップグレードをした環
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
【非エンジニア・QA向け】なんちゃってQAのススメ - Qiita
本記事はGoodpatch Advent Calendar 2016 の20日目の記事です！ Goodpatchで唯一QAの肩書をいただいているenpipiと申します。 普段は社内SEとして活動しておりますが、Prottの大幅な改修時などスポットでQAとして参加しています。 専任のQAがいれば良いのですが、ディレクターや手が空いている人がQA的なことをしているチームも多いのではないでしょうか。 本記事では、非エンジニア・QAに向けた簡単なQAのコツについて紹介します。 スタンスの話 QAは、平たく言えばサービスの品質に責任をもつ仕事です。 しかし、片手間でQAをやる場合や専任じゃない人に同じ責任を求めるのは酷です。 バグを絶対に出さないと意気込むよりも、エンジニアがやらなくても良い仕事を引き受けて、開発に集中してもらう環境を作るくらいで考えている方がモチベーションを保てると思います。 テス
electronに手軽にDevTools Extensionを導入する - Qiita
react devtoolsやredux devtoolsは非常に便利ですが、electronではchromeにインストールしたDevTools Extensionをそのまま使えません。 そして、electronはDevTools Extensionをサポートしていますが、その導入はやや複雑です。 electron/devtools-extension.md ドキュメントにはReact Developer Toolsを例にその導入方法が書かれています。 ChromeにReact Developer Toolsをインストールしてください。 検索バーからchrome://extensionsに移動し、extension IDを見つけます。fmkadmapgofadopljbjfkapdkoienihiのようにハッシュ文字列になっています。 拡張機能を格納しているChromeのファイルシステムの
すべてのReact.js初心者が知っておくべき9つのポイント - Qiita
9 things every React.js beginner should knowを意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 私は約6ヶ月間React.jsを使用してきました。それほど長い歴史ではありませんが、あなたがひげの長老として扱われるようなJavaScriptフレームワークの目まぐるしい世界の大きな枠組みの中で、私は最近、React初学者のTipsで少数の人々を支援してきましたので、ここでより多くの人々にその内容を共有するのが良いアイデアであると思いました。これらは全て私が始めた時に知っておきたかったことか、もしくはReactを習得するために本当に役立ったもののいずれかです。 あなたが絶対的な基本を知っていると想定して話を進めますが、もしコンポーネント、propsやstateなどの言葉に馴染みがなければ、公式の入門やチュートリアルページを読むと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://developers.google.com/web/tools/setup/workspace/setup-devtools
https://developers.google.com/web/tools/setup/workspace/setup-devtools
GitHub - zalmoxisus/remote-redux-devtools: Redux DevTools remotely.
GitHub - infinitered/reactotron: A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
GitHub - zalmoxisus/redux-devtools-extension: Redux DevTools extension.
