JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
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.
Configuring: Debugging | Next.js
Debugging This 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をやる場合や専任じゃない人に同じ責任を求めるのは酷です。 バグを絶対に出さないと意気込むよりも、エンジニアがやらなくても良い仕事を引き受けて、開発に集中してもらう環境を作るくらいで考えている方がモチベーションを保てると思います。 テス
すべてのReact.js初心者が知っておくべき9つのポイント - Qiita
9 things every React.js beginner should knowを意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 私は約6ヶ月間React.jsを使用してきました。それほど長い歴史ではありませんが、あなたがひげの長老として扱われるようなJavaScriptフレームワークの目まぐるしい世界の大きな枠組みの中で、私は最近、React初学者のTipsで少数の人々を支援してきましたので、ここでより多くの人々にその内容を共有するのが良いアイデアであると思いました。これらは全て私が始めた時に知っておきたかったことか、もしくはReactを習得するために本当に役立ったもののいずれかです。 あなたが絶対的な基本を知っていると想定して話を進めますが、もしコンポーネント、propsやstateなどの言葉に馴染みがなければ、公式の入門やチュートリアルページを読むと
Ruby Gem pryにおける.pryrcの便利な設定 - 気軽に楽しくプログラムと遊ぶ
pry実行時のIntegerの色が暗い紫で背景黒だとめちゃくちゃ見にくかったので変更しました。 調べた中で簡単に設定できるruby version番号の表示の設定も行ってみました。 pryの色変更方法 .pryrcがなければ、homeディレクトリに作成し、以下の設定を行う。 .pryrcの設定 # 色設定メソッドの定義 def Pry.set_color sym, color CodeRay::Encoders::Terminal::TOKEN_COLORS[sym] = color.to_s { sym => color.to_s } end # 色設定の変更 Pry.set_color :integer, "\e[1;36m" 設定書式 Pry.set_color Symbol "ESC [ 色コード m" 上記の例だと「1;36」が色コード 使用可能なSymbolの一覧とデフォルト色
Pryコンソールのプロンプトをカラフルかつ便利にする - Qiita
.pryrc Rubyistの皆さんはもうすでにPryを使っていると思います。が、Pryの真の力は~/.pryrcをカスタムすることで発揮されます。ファイルがない人は作りましょう（5秒）。 ~/.pryrcの内容は、Pryのセッションが開始されるたびに実行されます。たくさんのことができますが、今回はプロンプトを改良することに絞ります。 Pry.config.prompt Pryのプロンプトの実体はPry.config.promptで、文字列または文字列を返すProcオブジェクトを指定できます。プロンプトを動的に変更したい場合はProcを使うのがいいでしょう。 ところで、Pryを使っていると、たまに今のRubyのバージョンがいくつか忘れてしまうことがありますね？まあ、puts RUBY_VERSIONすればいいんですけど、どうせならプロンプトに表示しましょう。pryrcに以下を記述してくださ
Railsの計測を支えるActiveSupport::Notificationsについて | GMOメディア エンジニアブログ
こんにちは、技術推進室の篠崎（前回より5ヶ月ぶり）です。 Ruby on Rails（以下Rails）にはイベント（SQLを実行する、テンプレートを描画するなど）に対してフック（計測）できる仕組みがあるのはご存じですか？ おなじみのログもこのフックの仕組みを利用して出力されています。（1行目除く） Started GET "/samples/1.json" for 127.0.0.1 at 2014-12-10 12:35:30 +0900 Processing by SamplesController#show as JSON Parameters: {"id"=>"1"} Sample Load (0.5ms) SELECT `samples`.* FROM `samples` WHERE `samples`.`id` = 1 LIMIT 1 Sample Load (0.5ms) S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vscode-recipes/Next-js at master · microsoft/vscode-recipes
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 - zalmoxisus/redux-devtools-extension: Redux DevTools extension.
つながりをゆるふわにしよう Active supprt notifications
