タグ

関連タグで絞り込む (21)

タグの絞り込みを解除

debugに関するpipeheadのブックマーク (44)

  • 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)に対して一括検索が
    JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita

  • Pythonで学ぶ 基礎からのプログラミング入門(35) デバッグの手法について知ろう


    前回から、書かれたプログラムが期待どおりに動いているかどうかを確認する手法について扱っています。今回はデバックについて解説していきます。 Printデバッグ まず最初は一番シンプルなprintデバッグです。printデバッグという名前から想像できるかもしれませんが、その使い方はいたって単純です。簡単に言ってしまうと、プログラムの途中にプログラムとは直接関係のないprint文を﹁今どこを実行しているかを連番などで表示﹂したり、﹁怪しい変数の中身を表示﹂したりするためにはさみます。 たとえば以下のコードがあるとしましょう。 print(1) a = 1 print(2) b = 2 print(3) c = 3 print(4) d = a + b print(5) e = 5 / (c - d) print(6) f = e**2 このコードではプログラムの1行ごとにどこまで進んでいるかをp
    Pythonで学ぶ 基礎からのプログラミング入門(35) デバッグの手法について知ろう

  • デバッグの技術 | POSTD


    この記事は、アムステルダムで2015年に開かれたFronteersのカンファレンスで私が行った講演、﹁デバッグの技術﹂に対応するものです。 要約‥利用可能なあらゆるツールの使い方を学び、必要なときにそれを使うことで、バグの撃退を楽しみましょう。そのほうが、キーボードを無暗に叩いて6か月も費やしてしまうより、ずっと楽しいものです。 本題に入る前に… この記事を終わりまでスキップしたければ…… Don’t. Write. Bugs. とはいえ…… おそらくこれを読んでいるあなたはロボットではないでしょうから、1個や2個のバグぐらいは書いてしまったことがあるでしょう。﹁銀の弾丸﹂は存在しないのです。 実際、先ほどジョークで申し上げた﹃バグを書くな﹄というのは、デバッグの仕方を学ぶことの対極にあるものです。必要なのは経験です。バグに対するアプローチを見つけられるようになるためにはバグに遭遇しなけれ
    デバッグの技術 | POSTD
    pipehead
    pipehead 2015/12/04
    /* https://remysharp.com/2015/10/14/the-art-of-debugging の和訳 */ > ”Async”のチェックボックスをチェックし、そのバグを再び起こします。これで、非同期呼び出しを含めた完全なコールスタックを得られます。
    リンク

  • JavaScriptのデバッグのコツと技 | POSTD


    以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternetE
    JavaScriptのデバッグのコツと技 | POSTD

  • JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD


    この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり‥私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
    JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
    pipehead
    pipehead 2015/02/03
    http://blog.mitemitreski.com/2014/12/how-to-not-hate-java-script-tips-from.html の和訳; debugger, console.table(), console.trace(), Object.observe(), MutationObserver
    リンク

  • Chromeでデバグ中にjQuery等のライブラリをデバガから除外したい - Qiita


    ChromeのDev Toolsでブレークポイントを設置してデバグしているときにフレームがjQueryなどの実装の中に突入してしまうことがある。ほとんどの場合はjQueryの中身をデバグしたくない。 この Manage framework blackboxing で URI patternを指定することでデバグから除外するライブラリを指定できる。 あるいは、デバグしている途中に右クリックして"Blackbox Script"を選択してもいい。 超便利。Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you
    Chromeでデバグ中にjQuery等のライブラリをデバガから除外したい - Qiita

  • JavaScript デバッガの使用方法 | Firefoxの開発ツール


    JavaScript デバッガ (JavaScript Debugger) JavaScriptのコードにブレークポイントを設定して、ステップ実行などを行えます。名前が同じで混同しそうですが、JavaScript Debugger (Venkman) ではありません。 SyntaxErrorなどのエラーが含まれるファイルは、デバッグできません。目的のファイルをJavaScript デバッガで見つけられない場合には、ブラウザコンソールでエラーが発生していないか確認します。 基本 起動方法 JavaScript デバッガは、そのデバッグ対象によって起動方法が異なります。それぞれ[Firefoxボタン]のメニューから、 Firefoxで実行しているWebコンテンツ … ︻Web開発 → デバッガ︼ Firefoxのシステム関連 (アドオンなど) … ︻Web開発 → ブラウザツールボックス (ブ

  • デバッグを必修科目にするべき理由 | POSTD

    更新版: まずはここで私がコンソール ロギングでのデバッグを非難したり、無視しようとしているのではないということをはっきりさせておきたいと思います。コンソール ロギングは組み込み型プログラムやIDEがソースコードをスタックフレームに正しくマッピングできない場合、ブレークポイントが進捗を妨げてしまう場合等、様々な場合に使われます。要は他に適した方法がある時にコンソール ロギングを使うことを悪いと思っているのです。 プログラミングでは新しい機能を加える代わりに、 コードのメンテナンス と問題の解決にそのほとんどの時間を費やされるということが常識になっています。また、デバッグを通じて問題を発見できてもそのバグの解決方法がわからないということが多いのです。また ハイゼンバグやネッシーバグ のような再現できないバグに遭遇することもありますが、通常はどこを探すべきかが全くわからない状態で、大規模なコー

    デバッグを必修科目にするべき理由 | POSTD

  • Firefox の開発ツールに追加された新機能（2014 年 5 月 2 日版） | Mozilla Japan ブログ


    最新の Firefox の開発ツールに追加された新機能をご紹介します。 ご紹介する新機能は 2014 年5月2日にリリースされた Firefox Aurora でお使いになれます。 ボックスモデルの編集インスペクタで要素を選択するとその要素のマージンや幅などが表示されますが、表示されている数値をダブルクリックすることで、ボックスモデルの各値を編集できるようになりました。 ここでの編集した内容は、その場でレンダリング結果に反映されます。 数値を直接入力する以外に、Alt と矢印キーの上下で数値が 0.1 ずつ増減できます。これで位置の微調整もより効率的に行えます。 また Shift キーと矢印キーの上下で、数値を10ずつ増減できます。 Eyedropperインスペクタに付属のカラーピッカーに Eyedropper がつきました。 これで色を取得するピクセルを、文字通りピクセル単位で指
    Firefox の開発ツールに追加された新機能（2014 年 5 月 2 日版） | Mozilla Japan ブログ

  • DevToolsメモ

    ショートカット一覧 すべてのパネル Ctrl+[, Ctrl+], Ctrl+[1-9]:パネルの移動 Esc: コンソールの表示・非表示 Ctrl+f: 現在開いているファイルやパネルを対象に検索 Ctrl+Shift+f: すべてのファイルを検索 Ctrl+o: ファイル名でファイルを検索 Elementsパネル ←,→:選 択されている要素を開く・閉じる Enter: 選択されている要素の属性を変更する h: 選択されている要素のstyleにvisibility: hidden !important;を付与する F2: 選択されている要素を編集する Esc: 要素の編集を終了する Delete: 選択している要素を削除する D&Dで要素を移動することができる Event Listeners handlerを右クリックでShow Function Definition nodeをマウス

    pipehead
    pipehead 2014/04/27
    各パネルのキーボード ショートカットとコンソール API の一覧あり〼
    リンク

  • 覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita


    DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
    覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita

  • Firefox 30 の開発ツールに導入された新機能 | Mozilla Japan ブログ


    モダンなブラウザであれば、持っている開発ツール。Firefox も開発ツールを持っていることはご存知の方も多いと思います。 Firefox のバージョンが上がるたびに、開発ツールにも新機能が導入されていることはご存知でしたか？今回の記事では Firefox 30 で導入された新機能についてご紹介します。 インスペクタDOMの状態を確認できるインスペクタですが、2つの新機能が導入されました‥1つ目は上の画像で示したとおり、選択した要素の幅、高さ、パディング、マージンをレンダリングされたページの上に表示するようになりました。従来は右側のペインで確認していたボックスモデルですが、実際のページの上で確認できるようになり、より直観的になりました。2つ目は CSS のルールが上でフォントの上にカーソルをのせると、そのフォントのサンプルがポップアップするようになりました。ちょっとした改良ですが、
    Firefox 30 の開発ツールに導入された新機能 | Mozilla Japan ブログ

  • Web開発者ツールのコマンドラインAPIが便利。色々と捗るぞ


    ある日、あるページで、Chromeデベロッパーツールのコンソールを開き、﹁jQuery使ってるページかな？﹂なんて思って、﹃$﹄と入力してエンターキーを押すと、以下のような表示に。 > $ function $() { [Command Line API] } コマンドラインAPI？？ って何だ？ 標準でjQueryみたいなことができるのか？ と思いながら検索してでてきたのが以下のサイト。 Command Line API Reference – Chrome DevTools — Google Developers 元々Firebugについていた機能なようなのですが、Chromeのデベロッパーツールにもついているそうです。 というわけで、高校の英語の授業では成績順にA,B,Cクラスと分かれていてずっとCクラスだった自分、そして大学の英語の必須授業はさっぱり分からずに危うく単位を落としかけ

  • javascriptでスタックトレース - Qiita


    javascriptでちょっと賢いロガーっぽいのを作ったとしても、最終的にはconsole.logを使ったりすると、ログの表示箇所が全て同じファイル、行になるのでいまいち不便。 そこで、V8エンジンのブラウザだけだけど、スタックトレースを取得してログメソッドが実行された行数、ファイル名などを一緒に出力する方法を調べた。 を使えばいける。例えばこんな感じ。 Error.prepareStackTrace = function( e, st ) { return { functionName: st[0].getFunctionName(), lineNumber: st[0].getLineNumber(), //いろいろお好きに }; }; function log( msg ) { var obj = {}; Error.captureStackTrace( obj, log ); co
    javascriptでスタックトレース - Qiita

  • jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話

    jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で

    jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話

  • Python で標準添付の Debuggerのpdb を利用してデバッグするメモ


    概要pdb を利用してみる。 ドキュメント 公式ドキュメント﹁pdb — The Python Debugger﹂に概要が書いてある。 使い方 スクリプトを直接起動してデバッグする方法と、インタラクティブshell で起動する方法があるが、ここでは、スクリプトを起動してデバッグする方法で書く。 以下がデバッグするスクリプトのサンプル﹁even.py﹂。 自分の場合、スクリプトを直接デバッグすることがあまりなく、デバッグするのはライブラリとかをunittest経由でデバッグすることがが多いのでサンプルは unittest で書いている。 以下の例はクラス内の関数が偶数だけ返す所でバグがあり、奇数を返すようになっている。そんなに良い例ではないかも。 #!/usr/bin/env python # -*- coding: utf-8 -*- import unittest class Samp

  • 【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）


    こんにちは、橋本です。 前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。 assert count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline profile profileEnd time timeEnd timeStamp trace warn そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。 今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。 infoメソッド console.info(messa
    【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
    pipehead
    pipehead 2012/09/07
    info, log, markTimeline, profile, profileEnd, time, timeEnd, timeStamp, trace, warn
    リンク

  • 【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）


    こんにちは、橋本です。 今回と次回の2回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、 この﹁console﹂オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。 まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。 consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。 assert count debug dir dirxml error group groupCollapsed g
    【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）
    pipehead
    pipehead 2012/08/07
    assert, count, debug, dir, dirxml, error, group, groupCollapsed, groupEnd
    リンク

  • Maruta

    It seems we can’t find what you’re looking for. Perhaps searching can help. Search…

  • 圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場


    圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術﹁Source Maps﹂登場 JavaScriptをデプロイする際には、できるだけ小さくするために余計なスペースや改行を取り除き、さらに関数名なども変換して圧縮することがあります。しかし圧縮後のJavaScriptにバグが見つかるとそのままではデバッグしにくいため、いちいち元のソースコードに戻してデバッグしなければなりません。 Webサイト﹁HTML5 Rocks﹂の記事﹁INTRODUCTION TO JAVASCRIPT SOURCE MAPS﹂で紹介されたWebブラウザの新技術﹁Source Maps﹂は、圧縮状態のコードを実行していても元のソースコードを参照しながらデバッグできるだけでなく、CoffeeScriptのようなJavaScriptへ変換する言語であっても、
    圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場
  • 1 2 3 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.