Laravel Homestead + Visual Studio Code + Xdebugでデバッグ環境構築 - Qiita
Windows 10での環境構築手順となっているので、Macなどでは変わる可能性があるのであしからず。 2018/3/19 現時点の最新バージョンではXdebugがはじめから入ってました。なのでインストールのところは飛ばしてください。 開発環境 OS: Windows 10 Laravel Homestead v7.0.1 手順 Homestead側の設定 Xdebugのインストール Homestead v7.0.1は、デフォルトではPHP 7.2を使用することになっています。 ただ、Homesteadに入っているPHP 7.2はなぜかXdebugが用意されていないので（それ以前のバージョンでは用意されている）自前で用意する必要があります。 https://xdebug.org/wizard.phpを開き、以下のコマンドの実行結果をすべて貼り付けると、推奨されるXdebugと、そのインスト
今すぐJavaScriptデバッグ効率を上げるconsoleテクニック - Qiita
こちらの記事は、2019年9月に公開されたIndrek Lasn氏による『Boost your JavaScript Debugging Skills With These Console Tricks』の和訳になります。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek JavaScriptにはコードをデバッグするためのツールがたくさんあります。 JavaScriptコードをデバッグするお決まりの方法といえば、コンソールから結果を出力するだけのconsole.logメソッドを使うことでしょう。 十分に機能はしますが、デバッグに最適とまでは言えません。これよりもっと良い方法があれば、試してみたいと思いませんか？ consoleオブジェクトを使えば、ブラウザのデバッグコンソールへのアクセスすることができま
CSSのデバッグは、けっこう難しい
Web制作で一番悩ましいのが、期待通りに動作しないことだと思います。 CSSも簡単なものであれば、すぐに原因が特定できて修正できますが、デバッグするのが難しい時もあります。 そんな事例を紹介します。 CSS debugging is hard by Vincent De Oliveira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのデバッグは難しい CSSはデバッグするのが難しい時があります。Appleのサイトを例に見てみましょう。 blink-devで先日、backdrop-filterの実装についてアナウンスされました。 backdrop-filterとは、要素の背景（その下にあるもの）にフィルタを適用する本当に素晴らしいCSSのプロパティです。このプロパティはすでにSafariとEdgeに実装されており、Chr
JavaScriptの関数名の全て - Qiita
JavaScriptに限った話ではありませんが、関数というのは名前を持っていたり持っていなかったりします。関数名は普通はプログラムの読みやすさくらいにしか影響しませんが、JavaScriptでは必ずしもそうではありません。 例えばReactで関数コンポーネントを使う場合は関数名がコンポーネント名となり、React用開発者ツールなどで見ることができデバッグに役立ちます。また、Gulp v4もエクスポートした関数名がタスク名となります。 関数名は、関数オブジェクトのnameプロパティで取得できます。 function foo() { console.log('foo!'); } console.log(foo.name); // "foo"
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
フロントエンドエンジニアなら知っておきたい、JavaScriptのログ収集方法まとめ
サーバーサイドに比べて見落とされがちな、フロントエンドのエラーログ収集。JavaScriptのログ収集、確認に役立つ手法、ツール、ライブラリーを総まとめ。 開発進行中も本番モードでの運用時も、ソフトウェアアプリケーションにおいてロギングは大切です。 サーバーを運用しているなら、サーバーサイドの言語選択にかかわりなく無数のライブラリーを利用でき、広範に及ぶストレージメカニズムやログ出力を扱う際の各種ツールも使えます。 しかし、クライアント側アプリケーションとなるとロギングは見過ごされがちで、利用できる手法もかなり限られています。 この記事ではクライアント側アプリケーション、特にJavaScriptを中心としたシングルページアプリケーション（SPA）におけるロギングの実装方法を紹介します。 コンソール エラーとメッセージのロギング方法でもっとも一般的かつ分かりやすいのは、おそらくコンソールの使
turbo.js - WebWorkerでGPUを使った計算処理を実現 MOONGIFT
ブラウザのJavaScriptは一昔前に比べたら大幅に高速化されていますが、それでもシングルスレッドで処理されるという点がネックになります。それを克服するためにはWebWorkerを使った並行処理、GPUを使った計算処理が必要です。 それらの技術を使おうと思ったら非常に面倒なイメージがあります。そこで利用するのがturbo.jsです。 turbo.jsの使い方 コードを見るとJavaScriptではないのが分かります。 エラーがある場合にちゃんとエラー行が出てくるのがポイントです。これでかなりデバッグしやすくなります。 turbo.jsではGPUを使った処理であるため、通常のJavaScriptではない書き方になります。そのため簡単には使いこなせないかも知れません。また、利用できる範囲が限定的になりがちなのも注意点で、向き不向きも分かっている必要があります。そうした点を理解しつつturbo
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
PHP 5.6 に採用されるデバッガ phpdbg を使ってみた
Shin x blog Advent Calendar 2013 の 21 日目です。 第 12 回関西 PHP 勉強会 にて、PHP 5.6 に採用予定の phpdbg をひと足先に PHP 5.5.7 で触ってみました。 phpdbg phpdbg は、gdb ライクな PHP 用のデバッガです。ブレークポイントを設定して、その時点のコンテキストを確認したり、ステップ実行などができます。 phpdbg | php debugger インストール PHP 5.6 から同梱される予定の phpdbg ですが、これ自体はすでにリリースされており、PHP 5.4 から利用することが可能です。インストールには、PHP のソースコードが必要になるので、PHP も ソースからインストールします。 $ sudo yum -y groupinstall "Development Tools" $ sud
Frida • A world-class dynamic instrumentation toolkit
Dynamic instrumentation toolkit for developers, reverse-engineers, and security researchers. Scriptable Inject your own scripts into black box processes. Hook any function, spy on crypto APIs or trace private application code, no source code needed. Edit, hit save, and instantly see the results. All without compilation steps or program restarts. Portable Works on Windows, macOS, GNU/Linux, iOS, wa
PHP専用のデバッグツールバー·DebugBar MOONGIFT
DebugBarはPHP製のオープンソース・ソフトウェア（MIT License）です。 PHPのデバッグと言えばvar_dumpが最も良く知られていると思いますが、画面上にメッセージが出てデザインが狂いますし、連想配列などは見づらくなります。そこでもっとスマートにデバッグできるDebugBarを紹介します。 画面下に出ているバーがDebugBarです。 クリックすると内容が表示されます。これはメッセージです。 配列を見やすく整形もできます。 リクエストの内容も確認できます。 ある処理における経過時間をグラフ化しています。 エラーがあればその捕捉もできます。 最後に実行されたSQLについてです。こちらもエラーがあればその内容が表示されます。 こちらはデモのコード。 DebugBarの使い方は簡単で、AddMessageで出力したいメッセージを追加していきます。そして最後にHTMLに専用のス
シェルスクリプトのデバッグは typeset または declare を使うと良いかも - よんちゅBlog
はじめに つい最近知った便利なデバッグ方法 (長年シェルスクリプトを書いているのに知らなかった。これが常識だったら恥ずかしい…) シェルスクリプトのデバッグでは echo で変数の中身を見るという原始的な方法をよく使うかと思います。 いわゆる プリントデバッグ というやつですね。 もう少し詳しいデバッグが必要な場合は、 set -x と set +x でデバッグしたい部分を囲むという方法もあります。 今回は プリントデバッグ で使う echo の代わりに typeset or declare を使うと良いというお話です。 プリントデバッグは typeset or declare を使おう typeset or declare は変数宣言などでよく使うコマンドですが、変数の中身を見るのにも使えます。 echo と比べて何が良いのかというと、変数の中身はもちろん変数名や変数の型も表示してくれ、
Webサイトの品質をアップさせる便利ツール＆機能のまとめ | ベイジの社長ブログ
成熟市場においては、品質の高さでは優位性を築けなくなると言われます。しかし、だから品質にこだわらなくても大丈夫、と考えるのは早計です。裏を返せば、品質の高さが当たり前になっているため、少し品質が低いだけでブランドを大きく傷付けやすい環境になっているとも言えます。 そういった考えもあって、今年行っている当社のブランド再構築活動の中では、高い品質を担保するためのレギュレーションの整備に力を入れてきました。あわせて、当社として利用する品質を維持するためのツールや機能も改めて洗い出してみました。今日はこの内容を公開させていただきます。 JavaScriptエラーを無くす JavaScriptのエラーは、大きな問題が起こっていないように見えても、大事な機能が動かなくなったり、スペックの低いマシンで極端に挙動が遅くなったりすることがあります。各ブラウザのデフォルト機能で簡単にチェックできますので、エラ
MySQL のGDBによるデバッグ環境構築メモ - yoshifumi1975's diary
MySQL5.1からは、自作のストレージエンジンや自作の関数用のAPIが公開されている。 自作のストレージエンジンは気軽には作れないと思うが、自作の関数については検討の価値ありだと思う。 その際に役立つかもしれないデバッグ環境の構築メモ。 その前に、ここ の手順で、ソースを取得してデバッグオプション付きでMySQLをビルドしておく。 gdbでデバッグするには、下記のライブラリが「not stripped」でなければならない。そうじゃない場合は、glibcの再コンパイルが必要。CentOS5は「not stripped」なので問題ない。 # file -L /lib/libthread_db.so.1 /lib/libthread_db.so.1: ELF 32-bit LSB shared object, Intel 80386, version 1 (SYSV), for GNU/Lin
닷홈 | 페이지를 표시할 수 없습니다.
페이지를 표시할 수 없습니다. Error 404 Not Found. 요청하신 파일을 찾을 수 없습니다. 입력하신 페이지의 주소를 확인해주시기 바랍니다. 닷홈으로 이동
JavaScriptのエラーを見つけやすくしてくれるブックマークレット『Zeon.js』 | 100SHIKI
テキストエリア中のJavaScriptを解析し、エラーっぽいところを見つけてくれるのがZeon.jsだ。 使い方は簡単で、同サイトで配布されているブックマークレットを使うだけだ。 そうするとテキストエリアの右下に「Z」マークが現れる。それをクリックすればエラーの詳細が見れる、という仕組みだ。 テキストエリアにJavaScriptを書く、というシーンがあまり思い浮かばないのでテスト用にちょっとしたページを作る必要があるような気もするが、どうしてもデバッグに困ったときに覚えておいてもいいだろう。 もしくはどこぞの教育機関やら研修でも使えそうですな。
橋本商会 » iPhone JavaScript Console作った
作った → https://github.com/shokai/iphone-js-console iPhone用のJavaScript shellのようなもの。FirebugやChromeの開発パネルみたいな感じで使う。 chrome拡張やiPhoneシミュレータでiPhone用のwebページの動作は確認できるが、加速度センサやGeo Location APIなんかは実機で動かさないとデバッグできない。 しかしデバッグをしようにも、iPhone上で大量のalertを出すと気が狂ってしまう。iPhoneで実行中のwebページ上の任意のオブジェクトの中身を、Macから覗いたり値を書き換えたり関数を実行したりするツールが必要だったので作った。 なお、Androidのブラウザにはwebsocketが無いのでこのツールは動かない。Androidではlogcatで adb logcat | grep
PHP × Ajax = CMS » [CakePHP] Debugkit（デバッグツール）
CakePHP / CodeIgniter / MySQL / HTL5 / CSS3 / jQuery を活用したWebシステム開発 Debugkitとは 10分程度で設置できる、CakePHPのデバッグツールのプラグイン。 Debugkitの設置方法 下記URLからファイル名の日付が最も新しいZIPファイルをダウンロードする。 http://git2zip.com/thechaw/debugkit/ ZIPファイルを解凍してできたdebug_kitというフォルダを、app/plugins以下に置く。 /app/config/core.phpのデバッグレベルを2に設定する。 Configure::write('debug', 2); 運営中の本番環境でデバッグツールを使用する場合は、以下のように記述する。 （***.***.***.**のところに開発者のIPアドレスを入れる。） if
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 | Web活メモ帳
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
