React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
GitHub Actions のベストプラクティス
1 フロー 1 ワークフロー 一連のフローがある場合は 1 つのワークフローにまとめる。 トリガーしたイベントの JSON が使える needs での制御がしやすい 全体を追える グラフが表示される ファイルを分割したい ファイルを分割したい理由として以下が挙げられると思います。 行数が増えて読みづらい 処理を共通化したい 複合実行ステップアクション や workflow_run トリガー や Reusable workflow 🆕 を使うことになると思いますが、基本的には一連のフロー制御はメインのファイルに書いてその下を Reusable workflow や複合実行ステップアクションで外部ファイルへ分離するのが良さそう。 workflow_run はログが分断するのでおすすめしません。
Allan Jardine | Reflections | Visual Event 2
Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I've created Visual Event to help track events which are subscribed to DOM nodes. Introduction Visual Event is an open source Javascript bookmarklet which provides debugging informat
特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
［速報］AWS、クラウド障害をわざと起こす「AWS Fault Injection Simulator」発表。カオスエンジニアリングをマネージドサービスで実現。AWS re:Invent 2020
Amazon Web Services（AWS）は、開催中のオンラインイベント「AWS re:Invent 2020」で、アプリケーションに対してクラウド障害のシミュレーションを行える新サービス「AWS Fault Injection Simulator」を発表しました。 クラウド上で稼働するアプリケーションの耐障害性などを高めるために実際にクラウド障害をわざと発生させて問題点をあぶりだす手法は、「Chaos Enginieering（カオスエンジニアリング）」と呼ばれています。 Netflixが2012年にカオスエンジニアリングのためのツール「Chaos Monkey」を公開したことで広く知られるようになりました。 参考：サービス障害を起こさないために、障害を起こし続ける。逆転の発想のツールChaos Monkeyを、Netflixがオープンソースで公開 今回発表された「AWS Faul
『龍が如く7』は進化を続け、自動バグ発見どころかほぼ全自動のバグ取りシステムを構築。これぞ無職から勇者に成り上がるデバッグだ！【CEDEC 2020】 | ゲーム・エンタメ最新情報のファミ通.com
本記事では、1日目におこなわれた『龍が如く7 光と闇の行方』（以下、『龍が如く7』）のデバッグに関するセッション“「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム”をリポート。 セッションには、セガのQAエンジニア・阪上直樹氏と、ビルドエンジニアの粉川貴至氏が登壇した。 バグをハグしたくなる自動システム！ まずは阪上氏が開発者たちへ向けて、「バグは好きですか？」という質問からセッションがスタート。最初に龍が如くスタジオの各タイトルで、バグを発見した数の推移が公開された。ゲームの規模が大きくなるにつれ、バグも増加傾向にあるという。 そして全自動バグ取りシステムを運用した『龍が如く7』では、なんと25000ものバグが発見されたという。こう見るとネガティブな印象を受けるかもしれないが、バグ発見数が多ければ多いほど、ゲームクオリティがアップするということだ。 バグとい
PHPアプリ開発をPhpStormでスムーズに始められるよう、設定ファイルとドキュメントを用意する - BASEプロダクトチームブログ
BASE株式会社 Product Dev Division ソフトウェアエンジニアの田中(@tenkoma)です。主にPHPアプリ開発を担当しています。 BASEでは、PHPアプリ開発で使うエディタに制限はありませんが、希望する人はPhpStormを使えます。 PhpStormは設定を全くしなくてもかなり快適に使えると思いますが、多少設定するとより快適になります。 この記事では主に、開発環境とIDEを連携させアプリケーション開発をスムーズに始めるため、以下の設定について紹介します。 Xdebugと連携してリモートデバッグを可能にする PHPUnitと連携してテストをIDEから実行可能にする PHP_CodeSnifferを使ってコーディングスタイルを適用する EditorConfigを追加してコーディングスタイルを開発者で共有可能にする Xdebugと連携してリモートデバッグを可能にする
Dockerでデバッグ対象のコンテナにツールを入れずにtcpdump/straceなどを使うワンライナー - Qiita
はじめに Dockerであんなコンテナやこんなコンテナを動かしてると、なんかうまく動かなくて、デバッグのためにtcpdumpとかstraceなどのツールが使いたくなることが稀によくあります。 そんな時、デバッグ対象のコンテナ内にツールを一時的にインストールしちゃうというのが、まぁ簡単で分かりやすいんですが、デバッグ対象のコンテナを汚すのはできれば避けたいところです。 Dockerのコンテナの分離というのは、結局のところLinuxのリソースの名前空間の分離であるので、逆に同じ名前空間を共有すれば、デバッグ用に立てた隣のコンテナから、デバッグ対象のコンテナのネットワークやプロセスの状態を観察することも可能です。 また、docker buildはDockerfileを標準入力から受け取ることもできるので、ワンライナーにしてデバッグ用のコンテナをシュッと呼び出せるようにしてみました。 TL;DR
Node.jsのCoreにレポート機能が入った - hiroppy's site
node-report: meld into core by gireeshpunathil · Pull Request #22712 · nodejs/node Checklist make -j4 test (UNIX), or vcbuild test (Windows) passes tests and/or benchmarks are inc... 結構前から進行してて入れたいねーってなってたらこんなにかかってしまいました。 semver-minor なので、次のリリースで入るでしょう。 目的 主な目的としては、何かのエラーで例外をキャッチしたときにその時の詳細情報をコア側から提供し、原因特定の手助けをします。 node-report node-report とは、公式が出しているレポーターです。 主に以下の情報を提供します。 JavaScript Stack Trace N
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
Node.jsのアプリケーションデバッグ・改善方法をおさらいする - hiroppy's site
ステップ実行 --debugと--debug-brkは Node8 の時点ですでに非推奨なので、使わないでください。 デバッグ方法 コンソール Chrome devtools または、VSCode のような IDE に任せる 今回は、エディタ依存の話は特にしないです。 共通的な手順 基本的には、debugger を止めたい場所に置いていくことになります。 例として、以下のコードで説明していきます。 "use strict"; const { readFile } = require("fs"); const { promisify } = require("util"); const readFileAsync = promisify(readFile); (async () => { const data = await readFileAsync("hello.txt", "utf8"
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
Androidのテストに役立つツール2つ - Qiita
Android端末向けにアプリやwebサイトを開発するときに役立つツールと接続方法のメモ。 Vysor VysorはGoogle ChromeのアプリでPCに接続されたAndroid端末の画面をPC上に表示することができる。 ただし、Screan Recording機能を利用しているらしくAndroid4.4(Kitkat)以降の端末でしか使えないようだ。 特徴 表示するだけでなく、PC側から操作することができる。 文字入力をPCのキーボードを使ってできるのが非常に便利。 日本語の入力もPC側のIMEではなく端末側の機能を使うのだが可能。 Vysorを利用しながら、Android Studioから開発中のアプリを端末で起動することもできる アプリの開発中に使えば、アプリを起動して端末を手を持っていくことなく、PCの上で操作できてしまうので便利。 動作そのものは完全に端末側なのでエミュレータ
Node.jsでのJavaScriptメモリリークを発見するための簡単ガイド | POSTD
目次 初めに 極小理論 ステップ1. 問題の再現と確認 ステップ2. 最低3回のヒートダンプ採取 ステップ3. 問題の発見 ステップ4. 問題解決の確認 他のリソースへのリンク まとめ Something you might want to bookmark: Simple Guide to Finding a JavaScript Memory Leak in Node.js by @akras14 https://t.co/oRyQboa8Uw — Node.js (@nodejs) January 6, 2016 注釈：お気に入りに登録してください。 Simple Guide to Finding a JavaScript Memory Leak in Node.js （Node.jsでのJavaScriptメモリリーク発見簡単ガイド） @akras14 http://www.ale
Visual Studio CodeによるGo言語のデバッグ | DevelopersIO
はじめに 藤本です。 最近、仕事じゃないことでGo言語を書く機会が増えています。 業務上、プログラムを触ることがそんなに多くないせいか、記憶力が弱いせいか、基本的にプログラミングはIDEがないと辛いです。 私がIDEに特に期待することは、以下となります。 自動補完 デバッグ ジャンプ（というのかな？EclipseでCtrl + Clickで飛ぶやつ） IntelliJ IDEAやEclipseのGo言語Pluginを試してみましたが、EclipseによるJava開発やPyCharmによるPython開発のような感動は得られず、Atomエディタで開発していました。 そんな中、Visual Studio CodeでGo言語Extensionがあり、使い易いとの噂を聞いて、早速試してみました。結果、今のところはあまり不満ありません。 Visual Studio Codeについては下記記事をご参照
Go言語でファジング
この記事はGo Advent Calendar 2015の21日目の記事です． 今年もGoコミュニティーから多くのツールが登場した．その中でも異彩を放っていたのがGoogleのDynamic testing toolsチームの@dvyukov氏によるgo-fuzzである． go-fuzzはGo関数のファジングを行うツールである．このツールはとても強力で標準パッケージで100以上，golang.org/x/パッケージで40以上，その他を含めると300以上のバグを発見するという実績を残している（cf. Trophies）． 本記事ではこのgo-fuzzの紹介を行う． ファジングとは? Fuzz testing - Wikipedia, the free encyclopedia ソフトウェアの脆弱性検出におけるファジングの活用 「ファジング」とはソフトウェアのテスト手法である．テスト対象となる
var_dumpからの卒業、PHP開発を加速するデバッグ手法を考える - Qiita
PHPでデバッグ PHPでのデバッグってみなさん何してます？って聞くと、半分くらいはvar_dump();かechoって返ってくるんです。マジか、とか思うんですけど僕も数年前そうでした。情弱ですね。最近、RailsでWebアプリ作っていると、binding.pryが手放せない感じになってきてまして、なんでRails（Ruby）で書くんですか？と聞かれたら、binding.pryがあるからだと半分くらい本気で思っていて、そんなbinding.pry脳のままPHPの開発にスイッチすると、ちょっとしたことでウガーとなるわけです。JavaやObjective-Cでコード書いている人から見たら、そんなプログラミングのやり方あるのん？と驚かれるわけです。 var_dump();を書いてはブラウザ更新して変数の中身を確認したり、メソッドの挙動を確かめるために再度実行したり…そんな苦行からは卒業したい！と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RequestBin — A modern request bin to collect, inspect and debug HTTP requests and webhooks - Pipedream
Debug Tool - AWS X-Ray - AWS
良いデバッグログはプロジェクトの資産である
