現在の位置
コレは何? 編集
要素のアウトライン表示やユーザーCSSの即座適用など、ウェブ制作者に便利なツールバーやメニューを追加する拡張です。
文書構造やCSSのID・クラス名を知りたい方などは制作者以外にも便利な機能です。人様の作ったページソースを開きたい時にこまごました手順を踏む必要がありません。
使い方 編集
ページ中のID・クラス名を表示したり、要素を枠を付けて表示したりと、ウェブページ制作者などにとても便利なツールバーを提供する拡張です。
・まず一番左のアイコンで禁止事項を決めます。「画像は表示したくない」「JavaScriptは嫌い」「クッキーは無効で」「リファラーがばれるのはいやだなぁ…」などの要望にこたえることができます。それぞれ対応するものを「禁止する」状態にしてください。
※リファラー送信を無効化した場合、一部のカウンターが正しく表示されなくなるなどの不都合もあります。
・隣のアイコンでCSSについて詳細事項を決めます。現在使用されているCSSを編集していじることも可能です。気に入らない装飾があるなら書き換えてしまいましょう。
・鍵アイコンでフォームについて詳細事項を決めます。
・パレットアイコンでは画像ファイルに関する詳細事項を決めます。ALTで代替して全て文章に変えてしまったり、どうでも良さそうな画像は最初から表示しないなど、ネット環境に配慮した設計も可能です。
・インフォアイコンはページの情報を知ることができます。リンク先を表示したりJavaScriptの情報を出したりといろいろできます。
・その他アイコンではキャッシュやページ表示履歴など、個人的な情報の削除がワンタッチで行えます。
FAQ 編集
- リンクの状態の変更がききません。
- 確認済みで、次のリリースで修正するそうです。
- アイコンをPinstripe風にしたいYO!
- userchrome.cssに以下を記入してください（よくわからない時はユーザーCSSのカスタマイズを参照して作ってくださいな。）
.webdeveloper-toolbar-button{
list-style-image: url("chrome://webdeveloper/skin/buttons/pinstripe/toolbar.png") !important;}
.webdeveloper-statusbar-button{
list-style-image: url("chrome://webdeveloper/skin/buttons/pinstripe/statusbar.png") !important;}
.webdeveloper-sidebar-button{
list-style-image: url("chrome://webdeveloper/skin/buttons/pinstripe/sidebar.png") !important;}
XPI 編集
インフォアクシア
やLinkage Note!で配布されています。
DTD 編集
以下は参考訳です。
menu.dtd 編集
<!-- Common --> <!ENTITY webdeveloper.name "Web Developer"> <!-- Toolbar --> <!ENTITY webdeveloper.context.key "e"> <!ENTITY webdeveloper.key "W"> <!ENTITY webdeveloper.toolbar.name "Web Developer ツールバー"> <!-- Keyboard Shortcuts --> <!ENTITY webdeveloper.disable.styles.shortcut "D"> <!ENTITY webdeveloper.open.javascript.console.shortcut "J"> <!ENTITY webdeveloper.sidebar.shortcut "E"> <!ENTITY webdeveloper.validate.html.shortcut "V"> <!ENTITY webdeveloper.validate.local.html.shortcut "L"> <!ENTITY webdeveloper.view.css.shortcut "C"> <!ENTITY webdeveloper.view.source.shortcut "U"> <!ENTITY webdeveloper.view.style.information.shortcut "S"> <!ENTITY webdeveloper.zoom.in.shortcut "N"> <!ENTITY webdeveloper.zoom.out.shortcut "M"> <!-- Menus --> <!ENTITY webdeveloper.disable.label "無効化"> <!ENTITY webdeveloper.disable.key "D"> <!ENTITY webdeveloper.css.label "CSS"> <!ENTITY webdeveloper.css.key "C"> <!ENTITY webdeveloper.forms.label "フォーム"> <!ENTITY webdeveloper.forms.key "F"> <!ENTITY webdeveloper.images.label "画像"> <!ENTITY webdeveloper.images.key "I"> <!ENTITY webdeveloper.information.label "情報"> <!ENTITY webdeveloper.information.key "n"> <!ENTITY webdeveloper.miscellaneous.label "雑多"> <!ENTITY webdeveloper.miscellaneous.key "M"> <!ENTITY webdeveloper.outline.label "アウトライン表示"> <!ENTITY webdeveloper.outline.key "O"> <!ENTITY webdeveloper.resize.label "リサイズ"> <!ENTITY webdeveloper.resize.key "R"> <!ENTITY webdeveloper.validation.label "検証"> <!ENTITY webdeveloper.validation.key "V"> <!ENTITY webdeveloper.view.source.label "ソース"> <!ENTITY webdeveloper.view.source.key "S"> <!ENTITY webdeveloper.options.label "設定"> <!ENTITY webdeveloper.options.key "p"> <!-- Disable Features --> <!ENTITY webdeveloper.delete.domain.cookies.label "Cookieの消去（このドメインのみ）"> <!ENTITY webdeveloper.delete.domain.cookies.key "D"> <!ENTITY webdeveloper.disable.cookies.label "Cookieの消去"> <!ENTITY webdeveloper.disable.cookies.key "C"> <!ENTITY webdeveloper.disable.image.animations.label "画像のアニメーションの無効化"> <!ENTITY webdeveloper.disable.image.animations.key "I"> <!ENTITY webdeveloper.disable.images.label "画像の非表示"> <!ENTITY webdeveloper.disable.images.key "m"> <!ENTITY webdeveloper.disable.java.label "Javaを無効化"> <!ENTITY webdeveloper.disable.java.key "J"> <!ENTITY webdeveloper.disable.javascript.label "JavaScriptを無効化"> <!ENTITY webdeveloper.disable.javascript.key "S"> <!ENTITY webdeveloper.disable.page.colors.label "色の指定の無効化"> <!ENTITY webdeveloper.disable.page.colors.key "P"> <!ENTITY webdeveloper.disable.referrer.logging.label "リファラを送信しない"> <!ENTITY webdeveloper.disable.referrer.logging.key "R"> <!ENTITY webdeveloper.disable.styles.label "CSSの無効化"> <!ENTITY webdeveloper.disable.styles.key "t"> <!-- CSS Features --> <!ENTITY webdeveloper.add.user.style.sheet.label "ユーザースタイルシートを追加"> <!ENTITY webdeveloper.add.user.style.sheet.key "A"> <!ENTITY webdeveloper.edit.css.label "CSSを編集"> <!ENTITY webdeveloper.edit.css.key "E"> <!ENTITY webdeveloper.view.css.label "CSSを表示"> <!ENTITY webdeveloper.view.css.key "V"> <!ENTITY webdeveloper.view.style.information.label "スタイルの情報を表示"> <!ENTITY webdeveloper.view.style.information.key "S"> <!-- Forms Features --> <!ENTITY webdeveloper.convert.gets.posts.label "GETからPOSTに変更"> <!ENTITY webdeveloper.convert.gets.posts.key "C"> <!ENTITY webdeveloper.convert.posts.gets.label "POSTからGETに変更"> <!ENTITY webdeveloper.convert.posts.gets.key "P"> <!ENTITY webdeveloper.display.form.details.label "フォームの詳細を表示"> <!ENTITY webdeveloper.display.form.details.key "D"> <!ENTITY webdeveloper.enable.auto.completion.label "フォームの入力を自動補完する"> <!ENTITY webdeveloper.enable.auto.completion.key "E"> <!ENTITY webdeveloper.make.form.fields.writable.label "フォームを書き込み可能にする"> <!ENTITY webdeveloper.make.form.fields.writable.key "M"> <!ENTITY webdeveloper.populate.form.fields.label "フォームのname属性を書き込む"> <!ENTITY webdeveloper.populate.form.fields.key "F"> <!ENTITY webdeveloper.show.passwords.label "パスワードの**化を解除"> <!ENTITY webdeveloper.show.passwords.key "S"> <!ENTITY webdeveloper.view.form.information.label "フォームの情報を表示"> <!ENTITY webdeveloper.view.form.information.key "V"> <!-- Images Features --> <!ENTITY webdeveloper.display.image.dimensions.label "画像のサイズを表示"> <!ENTITY webdeveloper.display.image.dimensions.key "D"> <!ENTITY webdeveloper.display.image.paths.label "画像の場所を表示"> <!ENTITY webdeveloper.display.image.paths.key "I"> <!ENTITY webdeveloper.find.broken.images.label "無効な画像を検索"> <!ENTITY webdeveloper.find.broken.images.key "F"> <!ENTITY webdeveloper.hide.images.label "画像を取り除く"> <!ENTITY webdeveloper.hide.images.key "H"> <!ENTITY webdeveloper.make.images.invisible.label "画像を見えなくする"> <!ENTITY webdeveloper.make.images.invisible.key "M"> <!ENTITY webdeveloper.outline.images.with.empty.alt.label "alt属性値が空っぽの画像をアウトライン表示"> <!ENTITY webdeveloper.outline.images.with.empty.alt.key "O"> <!ENTITY webdeveloper.outline.images.without.alt.label "alt属性がない画像をアウトライン表示"> <!ENTITY webdeveloper.outline.images.without.alt.key "W"> <!ENTITY webdeveloper.outline.images.without.title.label "title属性がない画像をアウトライン表示"> <!ENTITY webdeveloper.outline.images.without.title.key "T"> <!ENTITY webdeveloper.replace.images.with.alt.label "画像をalt属性値に置き換え"> <!ENTITY webdeveloper.replace.images.with.alt.key "R"> <!-- Information Features --> <!ENTITY webdeveloper.display.access.keys.label "accesskey属性を表示"> <!ENTITY webdeveloper.display.access.keys.key "D"> <!ENTITY webdeveloper.display.block.size.label "ブロック要素のサイズを表示"> <!ENTITY webdeveloper.display.block.size.key "B"> <!ENTITY webdeveloper.display.id.class.details.label "ID・class名を表示"> <!ENTITY webdeveloper.display.id.class.details.key "I"> <!ENTITY webdeveloper.display.link.paths.label "リンク先を表示"> <!ENTITY webdeveloper.display.link.paths.key "L"> <!ENTITY webdeveloper.display.tab.index.label "tabindex属性を表示"> <!ENTITY webdeveloper.display.tab.index.key "T"> <!ENTITY webdeveloper.display.topographic.information.label "ページを地形図化"> <!ENTITY webdeveloper.display.topographic.information.key "o"> <!ENTITY webdeveloper.view.cookie.information.label "Cookieの情報を表示"> <!ENTITY webdeveloper.view.cookie.information.key "V"> <!ENTITY webdeveloper.view.page.information.label "ページの情報を表示"> <!ENTITY webdeveloper.view.page.information.key "P"> <!ENTITY webdeveloper.view.response.headers.label "HTTPレスポンスヘッダを表示"> <!ENTITY webdeveloper.view.response.headers.key "R"> <!ENTITY webdeveloper.view.speed.report.label "ウェブページの重さをチェック"> <!ENTITY webdeveloper.view.speed.report.key "S"> <!-- Miscellaneous Features --> <!ENTITY webdeveloper.clear.cache.label "キャッシュの消去"> <!ENTITY webdeveloper.clear.cache.key "C"> <!ENTITY webdeveloper.clear.http.authentication.label "HTTP認証の消去"> <!ENTITY webdeveloper.clear.http.authentication.key "H"> <!ENTITY webdeveloper.clear.session.cookies.label "セッション中のCookieの消去"> <!ENTITY webdeveloper.clear.session.cookies.key "S"> <!ENTITY webdeveloper.open.java.console.label "Javaコンソール"> <!ENTITY webdeveloper.open.java.console.key "O"> <!ENTITY webdeveloper.open.javascript.console.label "JavaScriptコンソール"> <!ENTITY webdeveloper.open.javascript.console.key "J"> <!ENTITY webdeveloper.show.comments.label "コメントアウトした内容を暴露"> <!ENTITY webdeveloper.show.comments.key "h"> <!-- Visited Links Features --> <!ENTITY webdeveloper.visited.links.label "リンクの状態"> <!ENTITY webdeveloper.visited.links.key "V"> <!ENTITY webdeveloper.mark.links.unvisited.label "全て未訪問にする"> <!ENTITY webdeveloper.mark.links.unvisited.key "M"> <!ENTITY webdeveloper.mark.links.visited.label "全て訪問済みにする"> <!ENTITY webdeveloper.mark.links.visited.key "A"> <!-- Zoom Features --> <!ENTITY webdeveloper.zoom.label "ページの拡大・縮小"> <!ENTITY webdeveloper.zoom.key "Z"> <!ENTITY webdeveloper.zoom.in.label "拡大する"> <!ENTITY webdeveloper.zoom.in.key "I"> <!ENTITY webdeveloper.zoom.out.label "縮小する"> <!ENTITY webdeveloper.zoom.out.key "O"> <!-- W3C Documents --> <!ENTITY webdeveloper.w3c.documents.label "W3Cの勧告文書"> <!ENTITY webdeveloper.w3c.documents.key "W"> <!ENTITY webdeveloper.html.401.document.label "HTML 4.01"> <!ENTITY webdeveloper.html.401.document.key "H"> <!ENTITY webdeveloper.xhtml.10.document.label "XHTML 1.0"> <!ENTITY webdeveloper.xhtml.10.document.key "X"> <!ENTITY webdeveloper.xhtml.11.document.label "XHTML 1.1"> <!ENTITY webdeveloper.xhtml.11.document.key "T"> <!ENTITY webdeveloper.css.1.document.label "CSS 1"> <!ENTITY webdeveloper.css.1.document.key "C"> <!ENTITY webdeveloper.css.2.document.label "CSS 2"> <!ENTITY webdeveloper.css.2.document.key "S"> <!ENTITY webdeveloper.dom.1.document.label "DOM 1"> <!ENTITY webdeveloper.dom.1.document.key "D"> <!ENTITY webdeveloper.dom.2.document.label "DOM 2"> <!ENTITY webdeveloper.dom.2.document.key "O"> <!ENTITY webdeveloper.wai.1.document.label "WAI 1"> <!ENTITY webdeveloper.wai.1.document.key "W"> <!-- Outline Features --> <!ENTITY webdeveloper.outline.block.level.elements.label "ブロック要素"> <!ENTITY webdeveloper.outline.block.level.elements.key "O"> <!ENTITY webdeveloper.outline.deprecated.elements.label "非推奨要素"> <!ENTITY webdeveloper.outline.deprecated.elements.key "D"> <!ENTITY webdeveloper.outline.frames.label "フレーム"> <!ENTITY webdeveloper.outline.frames.key "F"> <!ENTITY webdeveloper.outline.links.without.title.label "title属性の無いリンク"> <!ENTITY webdeveloper.outline.links.without.title.key "L"> <!ENTITY webdeveloper.outline.table.cells.label "テーブルのセル"> <!ENTITY webdeveloper.outline.table.cells.key "T"> <!ENTITY webdeveloper.outline.custom.elements.label "任意の要素..."> <!ENTITY webdeveloper.outline.custom.elements.key "C"> <!-- Resize Features --> <!ENTITY webdeveloper.display.current.size.label "ウィンドウのサイズを測定"> <!ENTITY webdeveloper.display.current.size.key "D"> <!ENTITY webdeveloper.display.current.size.title.label "タイトルバーにウィンドウのサイズを表示"> <!ENTITY webdeveloper.display.current.size.title.key "C"> <!ENTITY webdeveloper.custom.size.label "サイズを指定してリサイズ..."> <!ENTITY webdeveloper.custom.size.key "S"> <!-- Validation Features --> <!ENTITY webdeveloper.validate.css.label "CSS文書を検証"> <!ENTITY webdeveloper.validate.css.key "V"> <!ENTITY webdeveloper.validate.html.label "HTML文書を検証"> <!ENTITY webdeveloper.validate.html.key "H"> <!ENTITY webdeveloper.validate.links.label "ハイパーリンクを検証"> <!ENTITY webdeveloper.validate.links.key "L"> <!ENTITY webdeveloper.validate.section.508.accessibility.label "アクセシビリティ（Section 508）を検証"> <!ENTITY webdeveloper.validate.section.508.accessibility.key "S"> <!ENTITY webdeveloper.validate.wai.accessibility.label "アクセシビリティ（WAI）を検証"> <!ENTITY webdeveloper.validate.wai.accessibility.key "W"> <!ENTITY webdeveloper.validate.local.css.label "CSS文書（ローカル）を検証"> <!ENTITY webdeveloper.validate.local.css.key "L&q