デベロッパーツールの賢い使い方！テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。 テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素に与えられたclassを切り替える コンテンツの量でデザインが崩れないかテストする 指定した要素を非表示にする デザイン要素のスクリーンショット デザインのカラーを変更する CSSの変数を使用する（カスタムCSSプロパティ） 「filter: invert();」で要素のカラーを反転する C
devtool - ChromeのDevToolsを使ったnodeデバッガー
nodeを使ったソフトウェア、開発案件が増えてきています。そして開発を効率的に行うために必要なのがデバッグツールです。皆さんは何を使っているでしょう。 今回紹介するのはChrome/Chromiumで使われているDevToolsを使ってnodeアプリをデバッグできるdevtoolです。 devtoolの使い方 devtoolのインストールはnpmを使って行います。 npm install devtool -g 後はdevtoolコマンドを叩くとコンソールがnodeのインタプリタになります。requireも使えます。 ソースなどのタブも利用できます。 もちろんブレークポイントも使えます。 使い方としては以下のようにスクリプトを渡したり、標準入力を渡す、Browserifyなどと組み合わせることもできます。 # run a Node script devtool app.js # pipe i
JSONデータを検証してくれるサービス「JSONLint」
JSONデータを検証してくれるサービス「JSONLint」の紹介です。 JSONLint １．はじめに JSONのデータを生成したあとで正常に動作しないと、どこが間違っているのかチェックするのが面倒です。 このJSONLintを利用すれば生成または受信したJSONデータを検証してくれます。 ２．使い方 使い方は簡単で、JSONLintのページにアクセスし、テキストエリアにJSONをペーストして「Validate」をクリック。 検証OKであれば一番下に「Valid JSON」と表示されます。 NGがあれば、テキストエリアの該当行を反転させ、一番下にエラーメッセージを表示してくれます。 エラーの原因は一番後ろのカンマを抜いてみたのですが、正しいエラーメッセージが表示されています。
Vorlon.JS·多数のブラウザをまとめてデバッグできるリモートデバッガー MOONGIFT
今はWebブラウザの種類も増え、かつスマートフォンまであるなどWebサイトの作成も大変になっています。しかも開発ツールの使いやすいブラウザ、使いづらいブラウザもあり、開発に時間がかかります。 そんな現状を打破できるかも知れないのがVorlon.JSです。Vorlon.JSを使うと多くのWebブラウザのデバッグを一元管理できるようになります。 Vorlon.JSの使い方 Vorlon.JSはnpmでインストールできます。 $ npm install vorlon そしてvorlonコマンドでサーバが立ち上がります。 $ vorlon 後はこのVorlon.JSが出しているJavaScriptをデバッグしたいWebページ内に組み込みます。 <script src="http://localhost:1337/vorlon.js"></script> これで準備は完了です。例えば以下のようになり
IEDiagnosticsAdapter - IEのデバッグにGoogle ChromeのDevToolsを使おう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のWebブラウザではデバッグツールが標準搭載されています。一番使いやすいと思うのはGoogle ChromeのDevToolsでしょうか。その他FirefoxもFirebugの流れがあって使いやすいです。正直デバッガーが使い勝手悪いと開発効率が大幅にダウンします。 IEでWebサイトの検証、デバッグをしないといけないのにデバッガーの使い勝手が悪くて進まない…そんな方はIEDiagnosticsAdapterをインストールしてみましょう。 IEDiagnosticsAdapterの使い方 IEDiagnosticsAdapterはプロキシとして動きます（とはいえ設定は不要です）。まずIEDiagnosticsAdapterを立ち上げておきます。 そしてGoogle Chromeで
Chromeのデベロッパーツールが見やすくなる！デベロッパーツールのUIをダーク系に変更する方法
Readable テーマファイルの適用方法 テーマファイルを適用するには、Chromeの試験運用機能を使用します。 ※試験運用機能はサポート対象外のため、ご利用の際には十分ご注意ください。 テーマファイルをダウンロードします。 Chromeのアドレスバーに「chrome://flags/#enable-devtools-experiments」と入力し、試験運用機能にある「デベロッパー ツールのテストを有効にする」を有効化します。 Chromeを再起動。 デベロッパーツールを起動し、設定の「Experiments」タブを選択し、「Allow custom UI themes」をチェック。 これでデベロッパー ツールにテーマファイルが適用されます。 「Experiments」タブの「Allow custom UI themes」をチェック ※テーマ適用済みなので既に背景がブラックです。通常は
JavaScriptやjQueryで設定されたイベントの定義場所を調べる方法
JavaScriptやjQueryで設定されたイベントの定義場所を調べる方法を紹介します。 １．問題点 次のサンプルHTMLがあります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://user-domain/foo.js"><script> <input type="button" id="test1" value="テスト1" /> <input type="button" id="test2" value="テスト2" /> <div id="result"></div> foo.jsには次のjQueryが記述されています。 <pre><code>$(function(){ $('#test1').click(fun
うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter
モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを紹介します。
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
PHPからChromeにログ出力「Chrome Logger」
こんにちは、中川です。 PHPでの開発中のちょっとしたデバッグに、echo や var_dumpで画面に値を出力して確認することがありますよね。 このデバッグ方法は簡単でいいのですが、出力した配列の値などはパッと見で確認しやすいとは言えませんし、画面の表示内容が崩れたりします。 画面に出力しない方法としては、 error_log関数を使ってapacheログやファイルに出力する方法もありますが、 この場合は、サーバ側にログインしてtailなどでファイル内容を確認する必要がでてきます。 そんなちょっとした問題を解決してくれるツール 「Chrome Logger」をご紹介したいと思います。 Chrome Loggerを使えば、JavaScriptのconsole.logのように、 表示画面には影響を与えないでブラウザのデベロッパコンソールにPHPから値を出力できます。 ■Chrome Logge
とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 ｜https://wp.yat-net.com/name
2013年 04月 05日 とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 カテゴリ： Firefox タグ：javascriptエディタデバッグ JavaScriptを記述出来るエディタは沢山あるんですが、「とりあえずソースを書いて試したい」って時はFirefoxに標準で付属しているScratchpad（スクラッチパッド）を使っています。 Scratchpad（スクラッチパッド） Firefox 6で搭載されたスクラッチパッド。使ってる人は結構居るかもしれませんが、まだ知らない人も居ると思うのでちょっと紹介しようと思いました。 Firefoxにはブラウジングする機能以外に開発者向けの機能が沢山備わっています。Scratchpad（スクラッチパッド）もその中の一つで、これはJavaScriptのソースを記述・実行・デバッグが
DevTools Tips and Tricks
A whirlwind tour of DevTools tips and tricks Part I: DevTools tips, tricks and awesome features (video) Part II: Extending DevTools, Debug Protocol, Extensions, ... (video) Follow along @ bit.ly/devtools-tips Elements & Console Drag & Drop to reorder elements $0 to inspect selected element in console Break on node removal - delete me cmd-? to become a keyboard ninja Customize your settings! Disab
WordPressテーマ開発向けプラグインを一式管理するプラグイン・Developer - かちびと.net
WordPressを提供するAutomattic社が 先日リリースした、テーマ開発者 向けのプラグインを一括管理できる プラグイン、Developerのご紹介。 とくに特別な機能は無いです。 WordPressのプラグインの中には様々なテーマ開発補助のプラグインが存在します。その中で、Automattic社が選定して一括管理出来る様にしたプラグインがDeveloperです。 デバッグとかテストツールとか、WordPressのテーマ開発によく使われる補助プラグインをインストールできる等、一式管理できる、というプラグイン。 管理できるプラグインは以下の通り。 Debug Bar Debug Bar Cron Rewrite Rules Inspector Log Deprecated Notices VIP Scanner Monster Widget Beta Tester スクリーンショッ
ChromeのデベロッパーツールでCSSの未使用セレクタを調べる方法 - かちびと.net
Google Chromeのデベロッパーツール で現在閲覧中のページでロードされて いるCSSファイルから未使用のセレクタ を調べる、という方法です。こんなの Web制作者にとって常識だろ、みたい な内容だったらごめんなさい。 今更感あふれる内容ですけど、Chromeのデベロッパーツールで閲覧中のページで読み込まれているCSSからそのページで使用されていないCSSルールを調べる、という方法。 と言うかただの標準機能の紹介です。便利かどうかは使わないと分からないと思うのでテストしてご判断下さい。 手順 F12でデベロッパーツール開いてAudit（監査）っていうタブを選択し、Runで調査ツールを実行します。 ↑ 直ぐに解析は終わると思います。赤い枠の「Remove unused CSS rules」という部分が未使用のCSSルールです。 ↑ ファイルごとに調査結果が出ます。三角のマークをクリッ
ソースも公開されているオンラインのJavaScript構文チェックツール・jsLint.it - かちびと.net
Githubでソースも公開されている JavaScript構文チェックツール・ jsLint.itのご紹介。結構軽量で 使い勝手が良さそうだったので自 分のサーバーに入れて使いたいと 思います。 JavaScript用のLintツールです。同じくOSSのjslint.comを元に作成したそうです。node.jsを使用したLintツール、jshint(先日、次期バージョンも公開されました)やjshintr同様、ソースが公開されています。 JavaScriptコードをコピペするか、ファイルをアップロードする事で構文チェックが出来ます。チェックは構文だけでなく、構造上の問題も指摘してくれるっぽい。 ↑ オプションもやたら豊富。 ↑ エラーもサクッと出ます。 まださほど使ってないので精度は把握していませんけど、軽量でいい感じです。結局ブラウザごとにチェックしないとならないでしょうけど、こういうの知
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
IETesterやめてExpression Web SuperPreview - ヲレサイト
IETesterやめてExpression Web SuperPreview 先日ブログをいじった後にIETesterでIE6での表示を確認したらこんなエラーが出ました･･･ IE6のエラーなのかIETesterのエラーなのかどっちだべ？（￣▽￣|||） 手持ちのWindowsXP＋IE6の環境ではちゃんと表示されたので、こりゃIETesterのエラーなんだなと放置しておりました。 ところが最近WindowsXPをインストールし直す機会がありまして、インストール直後に見てみたら本物のIE6でも同じエラーが再現しちゃいました。 ええっ、再インストールする前はエラー無く表示されてたのになんで？とは思ったんですが、この後たんまりとWindows Updateしなくちゃなのでスルー。 Updateが終わった後にもう一度見てみたらきちんと表示されてました。ううむ、IE6のバージョンに依存しているよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
McAnswers
Postman | API Development Environment
IDEA * IDEA
