Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ
Web制作者にとって、Chrome デベロッパーツールは欠かせません。Web制作にすぐに役立つ、便利な機能・使い方を紹介します。 Cool Chrome DevTools tips and tricks you wish you knew already 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 要素をElementsパネル内でドラッグ&ドロップ 02. コンソールで現在の要素を参照 03. コンソールで最後に実行された値を参照 04. セレクタを加えて、要素のスタイルを追加 05. 変更したCSSをファイルに保存 06. 指定した要素のみをスクリーンショット 07. CSSセレクタを使用している要素を検索 08. コンソールで複数の行にまたがるコマンドを記述 09. Sourcesパネルの便利な機能 10. Wa
Google Chromeでポップアップがうまく開かない | loftimg™ blog
Google Chrome βがリリースされたので、早速入れていろいろなサイトを見てみました。 レンダリングエンジンにはSafariなどに使用されているWebKitとのことで、現行動いているサイトでHTMLのレイアウトの崩れはありませんでした。ただJavaScriptでポップアップ表示させているサイトで一部他のブラウザと違う挙動をしているところがあったのでメモ。 window.openでポップアップウィンドウを開いたあとに、サイズ調整や位置調整をしているJavaScriptの実行順序によってうまく機能しない場合がありそうです。 以下サンプル（このサイトをポップアップして、フルスクリーンにするJavaScript） サンプル（×） 実行順序 window.openwindow.resizeTo(screen.availWidth,screen.availHeight);window.move
Chrome開発版がWebRTCを実装 - JavaScriptからカメラやマイクが利用可能に
Google Chrome runs web pages and applications with lightning speed. Google Chromeの開発版にWebRTC実装が追加された。最新の仕様に比べると多少古い仕様が実装されているが、手軽に利用できるブラウザが登場したことは注目に値する。ChromeへのWebRTC実装の取り込みは、2011年6月に開始されていたが、半年の期間を経て最初のマイルストーンに到達したことになる。 WebRTCは、音声データや動画データのリアルタイム通信を可能にする機能。JavaScript APIとして提供されるほか、audio/videoなどのHTML5要素と絡めての使用が可能になる。WebRTCの機能を使うことで、JavaScript/HTML5からデバイスに接続されたマイクやビデオカメラにアクセスしてデータの取得が可能になるほか、特定の
コンテント・スクリプト | Chrome Extensions API リファレンス
This domain may be for sale!
content scriptからクロスサイトなXHRするプロトタイプ - 心魅 - cocoromi -
なおこのプロトタイプは完成しません。 AutoPagerize for Chromeのソースを参考にcontentスクリプトからクロスサイトなxhrをしてみた。 AutoPagerize for Chrome http://d.hatena.ne.jp/swdyh/20090525/1243232130 あと個人的な都合でGM_xmlHttpRequestのラッパーを作ることを目指します。 先に言い訳 設計？なにそれ ラッパーと言いつつonerrorに対応してません リスクの検証を全くしていませんのでどんな危険があるかわかりません。 まずいことがあったらツッコミして欲しいです コードの利用は自己責任でお願いします ContentScriptとextension本体との通信を行うAPI chrome.extension.connectというAPIがありコレでちょいと面倒なことをすると本体をプ
C++でGoogle Chromeのプラグインを書いてみた - ichhiの日記
はじめに Google Chromeでプラグインを書くには、NPAPIを使用する必要があるあるけど、サンプルプログラムが少ないから勉強するのに敷居が高い。そこで、Nixysaを使うと簡単にプラグインを作成できる。 今回作ったコード https://github.com/nus/NPAPISample 参考にしたサイト http://code.google.com/p/nixysa/wiki/HelloWorldWalkThru Nixysaとは C++のコードからNPAPIを生成させるツール。 http://code.google.com/p/nixysa/ NPAPIで出来ること OSのAPIやシステムコールが呼び出せる。 C/C++でブラウザを拡張 NPAPIプラグインをJavascriptで呼び出せる Google ChromeやFirefoxで動作する。 開発環境 Nixysa (
第9回 Google Chrome拡張とHTML5 #3 | gihyo.jp
こんにちは、太田です。今回はGoogle Chrome拡張に使えるHTML5関連技術の3回目をお送りします。 前々回はcanvas、ドラッグ・アンド・ドロップ、前回はECMAScript5やCSS3の一部を取り上げましたが、今回はHTML5関連APIのWeb Storageと、HTML5とは外れますが、Desktop Notificationsを紹介します。Web StorageはHTML5関連の中でもIE8でサポートされているなど、実装が進んでいるAPIの一つです。Desktop Notificationsはウェブページや拡張からユーザーに積極的な通知を出すことができるAPIです。MacではGrowlというアプリケーションが有名ですが、Growlに相当する機能をブラウザベースで実現しています。 Web Storage Web Storageはブラウザ上で動作するキーバリューストアです。J
第7回 Google Chrome拡張とHTML5 #1 | gihyo.jp
こんにちは、太田です。今回はGoogle Chrome拡張に使えるHTML5関連技術の解説をお送りします。 Google ChromeはWebKit（Safari）と連携して、HTML5とその周辺技術の実装を積極的に進めています。一般的なウェブサイトでは、互換性の問題からHTML5などの最新実装を積極的に使用することは困難ですが、Chrome拡張ではそういった問題にとらわれずに最新の技術を試すことができます。今回から数回はそういったHTML5関連の話題を取り上げます。 Chrome拡張で使えるHTML5 HTML5は2010年1月時点で策定途中の段階です。既に一部のブラウザで実装されている仕様であっても、（実装によるフィードバックを受けて）仕様が修正される可能性があります。多くのブラウザで実装されていて実質的に確定している部分もありますが、まだほとんど実装されていない仕様や、実装はされた
Manifest - content scripts | Chrome Extensions | Chrome for Developers
The "content_scripts" key specifies a statically loaded JavaScript or CSS file to be used every time a page is opened that matches a certain URL pattern. Extensions can also inject content scripts programmatically, see Injecting Scripts for details. Manifest These are the supported keys for "content_scripts". Only the "matches" key and either "js" or "css" are required. manifest.json { "name": "My
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - minodisk/chrome-FLConsole: Shows traces, warnings, and errors from SWF on the Console in Chrome Developer Tools.
Google Chrome Extensions - Google Mail Checker
screw-axis.com
Google Chrome Extensions Tutorial: Getting Started (Hello, World!)
Chrome Extensions API リファレンス