Visual Studio Code上でwebpack-dev-serverを使ってデバッグする - Qiita
はじめに VSCodeの売りの1つにデバッグ機能がありますが、webpack/webpack-dev-serverを使った場合のやり方があまり見かけなかったのでまとめてみました。 検証した環境 OS Windows 10 MacOS Sierra VSCode 1.8.1 Debugger for Chrome 2.4.1 webpack 1.14.0 webpack-dev-server 1.16.2 準備 webpack/webpack-dev-serverのインストール・設定 npmでインストールし、webpack.config.jsを編集します。詳しいやり方は他の記事を参照してください。 VSCodeのデバッグ機能を使う場合、sourcemapを出力するようにする必要があります。自分が実行した時の値を載せておきます。
Jenkinsで生成したファイルをBacklogのファイル共有に転送する | Backlogブログ
仕様や画面は現行バージョンと異なる可能性があります。 Backlogの最新版についてはこちらからご確認ください。 はじめまして。ヌーラボの中村です。 今日は、みんな大好きJenkinsとBacklogの連携についてお話します。 概要 JenkinsにはBacklog Pluginがあり、Jenkins上からBacklogの課題キーにリンクをはったり、Backlogのユーザ情報を用いて認証を行ったりすることができます。今回、Jenkins上で生成したファイルをBacklogに転送できるように拡張したので、この機能について紹介します。 いくつか活用のアイデアがあると思いますが、ここではドキュメント生成ツールSphinxと組み合わせた例を紹介します。以下がイメージ図です。 ローカルPCからファイルをコミット Jenkinsがコミットされたファイルをチェックアウト/更新 Sphinxを起動してHT
「どうすれば価値を生み出すか」を知るためにヌーラボ で行っていること | 株式会社ヌーラボ(Nulab inc.)
このエントリは 達人出版会から昨年出版された電子書籍「開発現場に伝えたい10のこと」のうち、私がヌーラボの開発の進め方について紹介させていただいた章を出版社の許可を得て転記したものです。その他の章も関西を中心に活躍しているエンジニアの経験にもとづく知見にあふれたものになっておりますので、本エントリを読んで興味をもたれたらお手に取って頂ければ幸いです。 では、少し長文になりますがおつきあいください。はじまりはじまり！ 「どうすれば価値を生み出すか」を知るためにヌーラボで行っていること 私が所属する株式会社ヌーラボは20名ほどの小さなソフトウェア開発会社です。私たちが自社で開発、運営しているウェブサービスには以下があります。 プロジェクト管理ツール Backlog オンラインドローツール Cacoo これらのサービスは、国内だけでなく海外でも沢山のユーザに利用いただき「使いやすい、楽しい」とい
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
『JavaScript開発時に便利なツールたち』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバ事業本部でディベロッパーをしています、平木(id:Layzie)です。 先日2/9に行なわれたFrontrend Vol.4で"JavaScript Development Tools – JavaScript開発の効率アップ"というテーマで登壇させていただいたのですが、セッションでは時間の都合でお話できなかった補足や、その他のツールのご紹介をしていきたいと思います。公式サイトで各講演のスライドと動画を見ることができますので、残念ながらイベントにいらっしゃらなかった方は、ぜひご覽になってください。 Chrome Canaryビル
Chrome DevTools.next
2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！」での講演資料です。
escodegen + esprima で JS のデバッグをしたら捗りそう - tokuhirom's blog
以下のようなコードを実行すると console.log([ [1,1,8] [2,1,16] ]);このような結果になる。 [ undefined ]アレレーってなってたんだけど kazuho さんにきいたところ、 [1,1,8][2,1,16] => ([1,1,8])[(2,1,16)] => ([1,1,8])[16] => undefinedってことでした。 こんな時、Perl Monger ならとりあえず B::Deparse することによって解決の糸口をさがすんだけど、そういうの EcmaScript でどうすんすかね、ってなことを kazuho さんにきいたところ、esprima っていう es のパーサーがあるよって教えてもらったので、AST はとりだせたんだけど、AST をみても埒があかないので、AST からソースにおとす君がないかなーとさがしたところ const なんと
YouTube人気急上昇
【ポケカ #53】フュージョンアーツ、仰天のボルテッカー、イーブイヒーローズが再販されたので開封してみた 【ゆっくり実況】
デバッグ力: よく知らないプログラムの直し方 - 2011-12-06 - ククログ
クリアコードではMozilla製品やRuby関連の開発だけではなく、広くフリーソフトウェアのサポートもしています。もちろん、サポート対象のソフトウェアの多くは私達が開発したものではありません。しかし、それらのソフトウェアに問題があった場合は調査し、必要であれば修正しています。 このようなサポートが提供できるのは、もともと、私達がフリーソフトウェアを利用したり開発したりしているときに日常的に問題の調査・修正をしていたからです。ソフトウェアを利用していると、問題に遭遇することはよくあることです。そのソフトウェアがフリーソフトウェアの場合は、開発者に問題を報告し、可能ならパッチを添えます。このとき、そのソフトウェアの内容を完全に把握していることはほとんどありません。しかし、それでも修正することができます。 それはどうしてでしょうか？今まではどのようにやっているのかを自分達でもうまく説明できなかっ
ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit... 次の記事 ≫：かなりいい感じのWordPressテーマ２０ Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
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です。 <
Firebug で JavaScript の実行時間の計測 | すぐに忘れる脳みそのためのメモ
1. console.time() で関数の実行時間を測る Firebug で、JavaScript の関数の実行時間を知りたい。 例えば、HTML の pre 要素内で JavaScript ファイルを読み込むとする。 index.html <html> <head></head> <body> <pre><script src="test.js"></script></pre> </body> </html> JavaScript のファイルである test.js の中で、console.time(), console.timeEnd() 関数を使うと、関数が実行される時間を測ることができる。 Firebug and Logging によると、 The low-fi approach is to call console.time("timing foo") before the co
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
「Google JavaScript Style Guide」に沿ってチェックしてくれる、グーグル製JavaScript文法チェッカー
「Google JavaScript Style Guide」に沿ってチェックしてくれる、グーグル製JavaScript文法チェッカー グーグルはJavaScriptコードのスタイルガイド「Google JavaScript Style Guide」を公開しており、同社自身もこのスタイルに従って開発を行っているとされています（スタイルガイドの日本語訳の例）。 このスタイルガイドに従った開発を支援してくれるツールがグーグルからオープンソースとして公開されました。同社のClosure Tools Blogのエントリ「Introducing Closure Linter」で紹介された文法チェックツールのClosure Linterです。 Closure LinterはPythonで書かれたツールで、コマンドラインから利用します。上記のエントリによると、次のようなJavaScriptをチェックに書
Firebugの意外と知られていない機能紹介（プログラマ向け） - KAYAC engineers' blog
羊毛布団を洗濯機にかけられないことを知りました。ago（@kyo_ago）です。 意外と知られていない機能が多い！？Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧が公開されています。 http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts 取り合えず以下の二つだけでも覚えておくと効率的かもしれません。 F12でFirebugの有効、無効の切り替え 広いコマンドラインモード時にCtrl+Enterでコードを実行 また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。 2. Firefox本体のツールバーに「要素を調査」ボタン Fi
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeでconsole.logにスタイルを適用する - Qiita
「Google Chrome Deveoper Tools」はこう使う！ 基本機能チュートリアル & GDD 2011 セッション概要
作業効率が10倍アップする Chrome Developer Tools の使い方
css-eblog.com