ARIA Validatorを利用したWAI-ARIAの検証 | アクセシビリティBlog | ミツエーリンクス
WAI-ARIAを使ってアクセシブルなコンテンツを作成したいと考えていても、WAI-ARIAの指定方法に問題がないかどうか不安、という方も多いと思います。そのような場合には、まずはWAI-ARIAの仕様に従っているかどうかを確認すると良いと、私は考えています。というのも、明白なミスを防ぐことができる制約がWAI-ARIAの仕様にはいくつか定められているためです。この記事では、ARIA Validatorを使った検証方法とWAI-ARIAの仕様で定められている制約のいくつかを紹介します。 ARIA ValidatorはページがWAI-ARIAの仕様に従っているかどうかをチェックするGoogle Chromeの拡張機能です。記事執筆段階での最新版は0.10です。 現時点ではまだベータ段階とのことですが、閲覧中のページに対して様々な検証を行うことができます。ただし、ARIA Validatorは
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
【旧版】Chrome Developer Tools入門 (全12回) - プログラミングならドットインストール
Chrome Developer Toolsの概要 公式サイトについて 必要となるツール 必要となる知識 ブラウザの動作の仕組み
chrome拡張開発Tip - Qiita
chrome拡張機能を自作し、自分もインストールして使用している場合、アイコンが全く同じなので 現在開発中のもの ウェブストアからインストールしたもの の２つの見分けがつかなくて困ることが多々ある。 Badgeをつける backgroundページやその他のHTMLファイルで以下のJavaScriptファイルを読み込めば良い。 var dev_build = 1; !function() { if(dev_build) { var title = document.getElementsByTagName("title")[0]; if(title != undefined) { title.innerHTML = "[dev] " + title.innerHTML; } chrome.browserAction.setBadgeText({"text": "dev"}); chrome.
Chromeのdevtoolsの中でTerminalを動かせてヤバイ - mizchi's blog
やばい ↑ Chromeの中のTerminalの中のtmuxの中でvimが動いている様子です Terminal in Chrome Devtools — Dmitry Filimonov 導入手順 Chrome Web Store - Devtools Terminal をChromeでインストール $ npm install -g devtools-terminal $ devtools-terminal ChromeのDevTools開いてTerminalを開く 一部キーバインドがChromeに握られて潰されてしまっているが(Ctrl-aなど)基本的には問題なく動く。スクショ通りvimも動く。 ヤバイ
ブラウザから手軽にHTTPリクエストを送信するChrome拡張『Advanced REST client』 - 閑古鳥
最近Java(Servlet)やらPHP、Javascriptなどを使った開発をしていますが、今時のブラウザはすごいですね。IEからChromeまでみんな開発オプションが豊富で、Javascriptのデバッグなどがとても簡単にできるようになっています。 とあるWebページにJSONでリクエストを送って何かさせる、というようなプログラムを作っていて、そのテストのためにわざわざクライアントを作るのも面倒だな(いずれ必要になるとしても)と思い、これもブラウザでできないのかな? と検索したところブラウザの拡張機能などで実現できるようです。 Advanced REST client Chromeにも複数あるようですが、試しに上記のAdvanced REST clientを入れてみました。 HTTPメソッドは一通り(GET/POST/PUT/DELETE)選ぶことができ、またContent-Typeの
NativeClientのC/C++モジュールをHTML/JSで呼び出す流れ - Qiita
要素の配置 Native ClientのC/C++モジュールを呼び出すためには、以下の様なHTML、JSを配置する。 <script type="text/javascript"> /* イベント発生時の処理 */ function handleEvent(messageEvent) { /* embedの要素をidで取得する */ var embedElement = document.getElementById('embedId'); /* Native Clientに値を送信したり、受信したりする処理などを記述 */ embedElement.postMessage('hello');/* C/C++へ値を送信 */ /* 引数で、C/C++から値を受け取ったりする。*/ window.alert(messageEvent.data); } /* イベントに応じた処理（メソッド）を
グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる
グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる 学習内容は全部で以下の7つのレベルに分かれており、17本のビデオと、レベルごとに用意された、実際に自分で操作して解いてみる75以上の例題から構成されています。レベルをクリアするとバッジがもらえるようになっています。 Level 1: Getting Started & Basic DOM and Styles Level 2: Advanced DOM and Styles Level 3: Working With the Console Level 4: Debugging JavaScript Level 5: Improving Network Performance Level 6: Improving Performance Level 7: Memo
Google ChromeでJavaScriptのデバッグをする際にはぜひインストールを！·JS Runtime Inspector MOONGIFT
JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
node.jsとGoogle Chromeによるローカルアプリケーション開発·node-chrome MOONGIFT
node-chromeはnode.jsをバックエンドに、フロントエンドをChromeを使ってローカルアプリケーションを開発します。 node.jsを使っていると何でもJavaScriptで完結したい気分になってきます。そこでターゲットになるのがローカルアプリケーションです。Gtkなどを使うことなく、何とChromeを使ってしまうソフトウェアがnode-chromeです。 デモアプリを立ち上げたところ。 デモのコードです。 node-chromeではGoogle Chromeのパスを指定し、普段使っているプロセスとは別でWebブラウザを立ち上げます。後はnode.jsのサーバとして動くのみです。ローカルでWebアプリケーションを立ち上げて利用するという新しいスタイルが実現しそうです。 node-chromeはnode.js製のソフトウェア（ソースコードは公開されていますがライセンスは明記され
SeleniumのChromeDriverでUser-Agentを変更する - スコトプリゴニエフスク通信
WebKit、しかもiOSのWebKitでしか動かないコードを通して世界を良くしていますかっ！？(挨拶)前回似たようなエントリを書いた時には分からなかったのだが、SeleniumのChromeDriverでUser-Agentを変更するのは比較的容易だった。これでFirefoxではピクリとも動かないサイトでもテストできる！！Opera、IE、なにそれ？ChromeDriverでUser-Agentを変更するには、SeleniumのChromeDriverのWikiページにあるように、DesiredCapabilitiesオブジェクトに--user-agentオプションを渡してChromeを起動するようにしてやればよい。Java, C#, Rubyといった各言語ともインターフェイスはほぼ同じなのではないかと想像するが、Pythonの場合はChrome WebDriverのdesired_ca
Just another Ruby porter, 2012-7-b
■ Google Chromeのクッキーをcookies.txt形式で Google Chromeもsqlite3でクッキーを管理しているので結構簡単に得られる。 % sqlite3 -separator $'\t' ~/.config/google-chrome/Default/Cookies 'select host_key, "TRUE", path, "FALSE", expires_utc, name, value from cookies' > cookies.txt ■ またXがハングしたが、Flashは関係なかった FirefoxでLDRを読んでたときに死んだわけなんだけど。 Flashは関係なかったんだな。ってことはタイミング的にはUbuntu 12.04が怪しいわけで、 なんといってもNVIDIAの件があるしなあ。いっそのこと買い換えるか。いやまだ早いな。
packerで圧縮されたJavaScriptのdebug方法 - monjudoh’s diary
minifyされたJavaScriptは各種開発者ツールのdeminifierを使えば整形された状態でdebug出来ますが、packerで圧縮されたJavaScript(以下packed JS)はどうかという話。 Google Chromeの開発者ツール前提で話をするので他のブラウザについては誰か調べてみてください。 packed JSをdebugする際の壁はそれがevalで実行されることですが、Google Chromeの開発者ツールではevalで実行されたJSもdebug実行出来ます。 問題はどうやってdebug実行に持っていくかですが、globalから辿れる何らかのAPIがあるなら呼び出し元でブレークポイントを貼ってstep intoすれば良いです。 その場実行されるようなJSの場合はそれもできないので工夫が必要です。 以下は古いjQueryを使った例でそのような工夫は本来不要ですが
List of Chromium Command Line Switches « Peter Beverloo
There are lots of command lines which can be used with the Google Chrome browser. Some change behavior of features, others are for debugging or experimenting. This page lists the available switches including their conditions and descriptions. Last automated update occurred on 2024-08-11. Condition Explanation
webRequest APIをざっくり理解する。(あるいはChrome拡張の作り方) – mzsm.me
昨日2月9日、Google Chrome 17の安定版がリリースされました。 このバージョンでの変更点の一つに、webRequest APIが正式に実装されたことがあります。 これまでこのAPIはexperimental(実験的機能)として実装されていましたが、今回晴れて正式なものになりました。 このAPIを使うと、Chromeが行う通信を監視して通信があるたびにイベントを実行したり、HTTPヘッダを書き換えたりすることができます。 Chrome 17では、User-Agentを他のブラウザに偽装することができる機能がDeveloper Toolsに付いたのですが、その機能もこのAPIを利用して実装されてい(ると思われ)ます。(Developer Tools自体もJavaScriptによって実装された“Webアプリ”なので、多分そのはずです) HTTPヘッダをいじれるというと不安に思われる
SourceMapでminifyされたJavaScriptを元に戻してみた - @vvakame の日記
当初の期待としては、CoffeeScriptをコンパイルしたJavaScriptにSourceMapで元のCoffeeScriptヒモ付てそのままデバッグ出来るようになんないのかなー？？て思ったんだけどなんか無理そうでした(結論)。 で、調査しはじめてみたんだけど全然情報なくてビビった。 CSS Selector Profiler, Source Mapping and Software Rendering « Peter Beverloo に情報がだいぶまとまってて超助かりました。 なんかWebKitの中の人なんじゃないのレベルで色々書かれててびっくりします。 Source Map Revision 3 Proposal - Google ドキュメント をざらーっと眺めてみたところで、JavaScript以外の言語にはなんか対応してなさそうだなーっていうのが分かってがっくり。字句解析した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
chrome アプリ／拡張機能でのデータ保存 - Qiita
Extensionizr
Omnibox Timer - Chrome ウェブストア
【旧版】Google Chrome拡張機能入門 (全20回) - プログラミングならドットインストール
