chromeデベロッパーツールでjavascriptのデバッグをする -node.jsもあるでよ- - tumblr
ソースコードリーディングとかしてると、ただコード読んでてもどうしようもなく、オブジェクトの中身や変数などを見るためにデバッグツールを使いながらでないとやっていけないことが今になって分かりました。自分でもどうしようもなくアホだと思いながら戒めのために覚書。 デバッグツールの機能 僕自身まともに触れる言語はjavascriptとphpくらいなもので、どちらもeclipseのようなIDEを使わず頑なにvimを使って組んできました。phpの場合はxdebugと連携させる方法*1や、javascriptならrhinoなんかを入れてquickrunとかって方法も考えられますが、僕はある程度は知っていながらもひたすら標準のスタックトレースやalert,console.log,console.dirばかりしていたので、まずはIDEなどに搭載されている一般的なデバッグ機能を復習をかねて覚書。 ブレークポイン
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
Live.js - One script closer to Designing in the Browser
one script closer to designing in the browser Say goodbye to Alt-Tab. Live.js makes sure you're always looking at the latest version of the page you're working on, whether you're writing HTML, CSS or Javascript. download live.js version 4 license Or use the bookmarklet! Drag the following link to your bookmarks bar: Live.js (using Live.js as a bookmarklet will only monitor CSS changes) How? Just i
PyCharm+Google ChromeでCSS-X-Fireを使ってみる - メモ置き場
PyCharmにCSS-X-Fireというプラグインがあります。 http://code.google.com/p/css-x-fire/ Firebugで編集した確認したcssをそのまま、実際のcssファイルに持ってくることができます。 Firefoxで使うのが普通みたいですが、Firebug liteを使えばChromeでも使えるということなので、試してみました CSS-X-Fireのインストール Preferences -> Pluginsから Firebug liteのインストール CSS-X-Fireプラグインを入れてPycharmを再起動すると、こんなダイアログがでます OKを押すとFirefoxのプラグインについての説明ページが表示されます。 http://localhost:6776/files/about.html chromeの場合はこっちというリンクがあるので、そちら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
