サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、その行を訪れたタイミングでログを出力できます。 もちろんログ内には{式}という書式を使えば式も含めることもできます。 既存のコードに修正を加えることなく、ログを出力できるのは嬉しいですね！！ これで 「プリントデバッグしたprint行を消し忘れてPRあ
Google provides two categories of tools to measure and debug performance: Lab tools: Tools such as Lighthouse, where your page is loaded in asimulated environment that can mimic various conditions (for example, a slownetwork and a low-end mobile device). Field tools: Tools such asChrome User ExperienceReport (CrUX), which is based on aggregate, real-user data fromChrome. (Note that the field
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
VSCode でNext.js のデバッグをできるようにしたら開発のデバッグが超絶楽になったのでその方法について紹介していきたいと思います。 ※補足Next.jsvscode 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.
How to use debugging tools withNext.js This documentation explains how you can debug yourNext.js frontend and backend code with full sourcemaps support using the VS Code debugger,Chrome DevTools, or Firefox DevTools. Any debugger that can attach to Node.js can also be used to debug aNext.js application. You can find more details in the Node.js DebuggingGuide. Debugging with VS CodeCreate a
iOSアプリのCharles Proxyがリリースされました これまでもCharlesはWindows,macOS,Linux用のアプリとして存在していましたが、この度iOSアプリの Charles Proxy がリリースされました。 App Storeから購入できます。これにより、iOSだけでパケットをトレースすることができるようになりました。 公式のアナウンスはこちらをご覧ください。 記事執筆時点の機能は以下です。 iOSデバイス上のHTTP（S）通信のトラフィックをキャプチャする SSLプロキシとして機能し、SSL/TLS通信がプレーンテキストで見れる アプリでリクエストとレスポンスの内容が確認でき、個別のリクエストやセッション全体をデスクトップのCharlesに共有できる 使ってみた 早速App Storeで購入してインストールしてみました。 検証環境本エントリは以下の環境で
問題 nodeに読み込ませるソースをwebpackとbabelでコンパイルするようにすると, エラー時のスタックトレースが at Object.eval (webpack-internal:///76:29:7) のような意味不明なものになってしまいます. これはソースマップを有効にしていても起きてしまいます.webpackのissueにも既にこの問題は報告されていましたが. SourceMap don't link to an src file but towebpack-internal:///[LINE_NUMBER] · Issue #5186 ·webpack/webpack ｢sourcemapはブラウザが読み込むものだからnodeは取り扱わないよ｣とownerにすげなく言われています. 解決法 evanw/node-source-map-support: Adds s
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
当エントリは、Schoo Advent Calendar 2016の9日目として書かれています。 @takoba と申します。Schooのエンジニア兼カレー王子を担当しております。 主にフロントエンドを主戦場としてますが、バックエンドも普通に書いてます。 むしろ最近は比重多めになってきてるので、ぼくを自由にしてくれるバックエンド得意なアプリケーションエンジニアの方絶賛募集中です！！！ そんな中でフロントエンドエンジニアとしての矜持を保つために、今回はE2Eテストのデバッグに便利なツールをご紹介します。 node-inspectorの時代は終わった...？ 先日Schooで取り扱っている某リポジトリで利用していたNode.jsのバージョンを大幅にアップグレードしたときのお話です。 Node.jsのデバッグに多大なる貢献をしてくれるnode-inspectorですが、そのアップグレードをした環
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
本記事はGoodpatch Advent Calendar 2016 の20日目の記事です！Goodpatchで唯一QAの肩書をいただいているenpipiと申します。 普段は社内SEとして活動しておりますが、Prottの大幅な改修時などスポットでQAとして参加しています。 専任のQAがいれば良いのですが、ディレクターや手が空いている人がQA的なことをしているチームも多いのではないでしょうか。本記事では、非エンジニア・QAに向けた簡単なQAのコツについて紹介します。 スタンスの話 QAは、平たく言えばサービスの品質に責任をもつ仕事です。 しかし、片手間でQAをやる場合や専任じゃない人に同じ責任を求めるのは酷です。 バグを絶対に出さないと意気込むよりも、エンジニアがやらなくても良い仕事を引き受けて、開発に集中してもらう環境を作るくらいで考えている方がモチベーションを保てると思います。 テス
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のファイルシステムの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
