知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
DockerでRailsの開発環境を構築する | DevelopersIO
モバイルアプリサービス部の五十嵐です。 先日、あるRailsアプリケーションの開発環境を同僚のマシンに作成しようとしたところ、gemのインストールに1日かかってしまいました。環境構築は手順化されていたのですが、トラブったのは主にNative Moduleを利用する libv8 、 therubyracer 、 rmagick などのおなじみの面々です。手順を作った時は、これらのgemのインストールに必要なライブラリを brew install で最新バージョンをインストールするだけでよかったのですが、時が経ちライブラリの最新バージョンが更新されていたことが主な原因でした。この状況はいかんな〜と思い、Railsアプリケーションの開発環境もDockerにすることにしました。 本記事では、Railsアプリケーションの開発環境をDockerにするときに検討したことや問題点などを書いています。なお、
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
【HTML5 Experts.jp】2015年11月のブラウザ関連ニュース
【HTML5 Experts.jp】2015年11月のブラウザ関連ニュース 矢倉 眞隆（myakura） Firefox 42リリース、Wi-Fi経由リモートデバッグが便利 11月3日にFire fox 42がリリースされました。ES2015の Reflect やCSPの upgrade-insecure-requests がサポートされています。 以前の記事でFirefoxの開発者ツールの機能を紹介したところ、すこし反応が良かったので今回も取り上げようと思います。 まずはCSSの filter エディタです。フィルタは強力ですが、値をGUIがないとつらいものです。開発者ツールで filter プロパティを指定すると、各フィルタの値を変更できるポップアップが現れます。 フィルタの値を数値で入力するそっけないものではあるんですが、ドラッグアンドドロップでフィルタの並び替えができるのは便利です
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
Android実機のデバッグが激しく捗る「Webインスペクタ」
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第4回は、Android端末に表示しているWebサイトを、Chromeデベロッパーツールで検証する「Webインスペクタ」を解説します。 特定デバイスでのバグ、表示崩れの原因を調べたい スマートフォン向けにコーディングをしていると、特定の端末でしか発生しないバグや表示崩れがあります。「特定の端末」の場合、第1回で解説した「Device Mode」では問題が再現せず、原因の特定は困難です。 原因を特定するには、バグ、表示崩れが発生した端末でChromeデベロッパーツールの「Webインスペクタ」を使って、問題のWebページを表示しながら検証します。 Webインスペクタの設定方法 Webインスペクタに使用するAndroid端末の設定を変更します。設定画面を開き、「開発者向けオプション」を表示します。
クラウドに分散して実行中のJavaコードをデバッグできる「Google Cloud Debugger」が、Compute Engineに対応
クラウドに分散して実行中のJavaコードをデバッグできる「Google Cloud Debugger」が、Compute Engineに対応 Googleが昨年11月に発表したクラウド対応デバッガ「Google Cloud Debugger」は、Google App Engineで分散したサーバ上で動作しているJavaアプリケーションであっても、コード中の任意の位置の変数の値を参照できる、といった機能を備えたデバッガです。 クラウド上では、アプリケーションを実行しているサーバを特定することが時として困難であり、また稼働しているサーバの台数も変動する可能性があります。そのため、アプリケーションの稼働環境が固定されていることが前提の従来のデバッガでは、クラウド環境上でデバッグすることは容易ではありませんでした。 そのためプログラマは、状態が知りたいコードの場所にログを吐くコードを組み込み、あと
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
パーフェクトなCRubyを目指して - 1行のバグ修正に潜む苦労 - - I am Cruby!
この記事はパーフェクトRuby Advent Calendar 2013 - Adventar の9日目です。 前の日のエントリーはパーフェクトRuby Advent Calendar 2013(8日目) Let's Sinatra Life - たちブログです。 まだ参加できますので、みなさまもぜひ。 パーフェクトRuby Advent Calendar 2013 - Adventar パーフェクトRubyRubyの仕様に大変詳しい同僚への献本をインターセプトして読ませていただきました。 さまざまな機能をまとめたとてもよい本だと思います。 著者のみなさまの苦労が偲ばれました。パーフェクトRuby (PERFECT SERIES 6)作者: Rubyサポーターズ,すがわらまさのり,寺田玄太郎,三村益隆,近藤宇智朗,橋立友宏,関口亮一出版社/メーカー: 技術評論社発売日: 2013/08/1
正規表現と文字列がマッチしているか簡単にチェックできるオンラインツール -RegExp playground
正規表現と文字列を入力し、それがマッチしているかどうか簡単にチェックできるオンラインツールを紹介します。 NGの画面 正規表現のチートシート ページ下部にあるチートシートから。 . 任意の文字にマッチする（改行を除く） {n} n回の繰り返し {n,} n回以上の繰り返し {n, m} n回以上m回以下の繰り返し ? {0,1}と同じ * {0,}と同じ + {1,}と同じ \w アルファベット、数字またはアンダーバー、[a-zA-Z0-9_]と同じ \d 数字、[0-9]と同じ \s 空白文字、[\t\r\n ]と同じ […] キャラクタをクラス化 [^...} キャラクタを否定クラス化 (…) パターンのグループ化 (?:…) パターンの非格納グループ化 (?=…) 先読み (?!…) 否定先読み ^ 行の先頭にマッチする $ 行の終端にマッチする \b 単語境界にマッチ \B 単語境
シェアデバッガー - 開発者向けFacebook
シェアデバッガーでは、コンテンツがFacebookでシェアされたときの表示をプレビューし、Open Graphタグの付いた問題をデバッグできます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
