IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

Windows 版 Safari で JavaScript Console を表示する方法

JavaScript WebKit

ちなみに Mac OSX 版では

~/Library/Preferences/com.apple.Safari.plist に IncludeDebugMenu を 1 として追加すれば Debug メニューが表示されます。

$ defaults write com.apple.Safari IncludeDebugMenu 1

なので Windows 版でも同じだろうと思って

C:\Program Files\Safari\Safari.resources\Defaults.plist

をエディタで開いてみると XML だったので

<key>IncludeDebugMenu</key><true/>

や

<key>IncludeDebugMenu</key><integer>1</integer>

や

<key>IncludeDebugMenu</key><string>1</string>

と追加してみたのですが。残念ながら Debug メニューは表示されませんでしたすみません＞＜いじる plist が違ってました。詳しくは一番下をご覧ください。

ならば、あてずっぽで

Ctrl+Shift+J

と押してみたら、 JavaScript Console が表示されました。
これで JavaScript のエラーを見る事ができるので、開発がかなり楽になります。

(追加)Debug メニューが表示される方法が分かりました

http://la.ma.la/blog/diary_200706120455.htm　のエントリーを見ていたら、いじるファイルの場所が違うっぽかったので、試してみたら、やっぱりいじるファイルが違っていました＞＜。ごめんなさい
以下のファイルの

C:\Documents and Settings\<user>\Application Data\Apple Computer\Safari\Preferences.plist

<key> がならんでいるところに以下の行を追加してください。

<key>IncludeDebugMenu</key>
<integer>1</integer>

そうすると便利な Debug メニューが表れます。

やったね！

Safari3 では :checked :disabled :enabled が使えるっぽい

CSS

サンプル

http://amachang.art-code.org/safari3_css_selector/

でも

<label> を横に並べて、 :checked + label とかやっても label は変わらなかった。まだバグがあるようだ。

:lang(en) とかも

使えるみたいだけどバグだらけで使いものになりませんでした。バージョンアップに期待。

Safari3 では window オブジェクトが document の default view

JavaScript

昨日 getComputedStyle のエントリ書いたばかりだったけど、その補足です。

http://d.hatena.ne.jp/amachang/20070611/1181554170

Safari も 3 からは

↓この Window Object の草案に従って、 window を document の view として実装した模様

Each view of a Document presented in a browsing context MUST be represented by an object that implements the Window interface.

http://www.w3.org/TR/Window/

これによって

今まで、こうやって書かなきゃダメだった getComputedStyle を

var style = e.currentStyle || document.defaultView.getComputedStyle(e, '');

こう書けるようになります。

var style = e.currentStyle || getComputedStyle(e, '');

まとめ

21 文字の節約！わーい！

Safari 3 に実装された、当たっている CSS ルールを全て抽出できる getMatchedCSSRules が凄い

JavaScript

今日は、まだまだ Safari 3 が熱い！

window オブジェクトを走査していたら、またしても面白そうな関数を見つけてしまった。
その名も getMatchedCSSRules ！！！

まずはデモをご覧ください

以下のブックマークレットを任意のサイトで実行すると、コンテンツの下に DOM Inspector のような要素が出現します。
そこで、要素を開いていくと Safari の場合は、どの CSS ルールが当たっているかを見る事ができます。

javascript:(function(){var d=document,s=d.createElement('script');s.className='css-inspector-script';d.body.appendChild(s);s.src='http://amachang.art-code.org/cssInspector.js'})()
実際に使っている様子

http://amachang.art-code.org/cssInspector.htm

これは、 getMatchedCSSRules 関数を使ってどの CSS ルールが要素に当たっているかを取る事ができるため簡単に実装できます。

getMatchedCSSRules の使いかた

こんな感じ

var rules = getMatchedCSSRules(element, '');
if (rules) {
  for (var i = 0; i < rules.length; i ++) {
    var rule = rules[i];
    alert(rule.selectorText);
    alert(rule.style.color);
    alert(rule.style.backgroundColor);
  }
}
引数

第一引数は対象要素。
第二引数は疑似要素を指定する場合に使う。通常は第二引数は空文字列でいい。
第三引数はよくわからん＞＜

取れるオブジェクトは

CSSRuleList ↓これ

// Introduced in DOM Level 2:
interface CSSRuleList {
  readonly attribute unsigned long    length;
  CSSRule            item(in unsigned long index);
};
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList

JavaScript では、配列っぽく使えるのでこんな感じで回せる

for (var i = 0; i < rules.length; i ++) { var rule = rules[i] }

で、rules[i] は↓これで

// Introduced in DOM Level 2:
interface CSSStyleRule : CSSRule {
           attribute DOMString        selectorText;
                                        // raises(DOMException) on setting

  readonly attribute CSSStyleDeclaration  style;
};
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule

↑これは↓これを継承してる

// Introduced in DOM Level 2:
interface CSSRule {

  // RuleType
  const unsigned short      UNKNOWN_RULE                   = 0;
  const unsigned short      STYLE_RULE                     = 1;
  const unsigned short      CHARSET_RULE                   = 2;
  const unsigned short      IMPORT_RULE                    = 3;
  const unsigned short      MEDIA_RULE                     = 4;
  const unsigned short      FONT_FACE_RULE                 = 5;
  const unsigned short      PAGE_RULE                      = 6;

  readonly attribute unsigned short   type;
           attribute DOMString        cssText;
                                        // raises(DOMException) on setting

  readonly attribute CSSStyleSheet    parentStyleSheet;
  readonly attribute CSSRule          parentRule;
};
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule

なので、

alert(rule.cssText);      // .hoge#fuga { color: rgb(255, 0, 0); width: 100%; }
alert(rule.selectorText); // .hoge#fuga
alert(rule.style.cssText);// color: rgb(255, 0, 0); width: 100%;
alert(rule.style.color);  // rgb(255, 0, 0)
alert(rule.style.width);  // 100%
alert(rule.parentStyleSheet.href); // http://hoge.ho.ge/fuga.css

みたいなテキストが簡単にとれてしまう！

まとめ

テラ便利！！！
ちなみに仕様書っぽいものは http://webkit.org/docs/a00029.html これくらいしか見当たらない。