Seesponsive

Interactively see how a website's layout changes responsively

Seesponsiveとは何ですか?

SeesponsiveはSimon Collinsによって開発されたChromeの拡張機能で、その主な機能は「Interactively see how a website's layout changes responsively」です。

拡張機能のスクリーンショット

screenshot
screenshot

Seesponsive拡張機能のCRXファイルをダウンロード

Seesponsive拡張子のファイルをcrx形式でダウンロードし、ブラウザにChrome拡張機能を手動でインストールするか、crxファイルを友達と共有して簡単にChrome拡張機能をインストールします。

拡張機能の使用方法

                        INTRODUCTION

Seesponsive is a simple Google Chrome extension that allows you to see how a website's layout and design adjust responsively as the available screen width changes. It also lets you see the media queries that are being progressively matched or unmatched, driving these changes.

USAGE

To use the extension, just browse to a website that uses media queries. Then click the extension's action button in the toolbar. After a few seconds a black action bar will appear at the top of the page with two buttons - Shrink and Grow.

Clicking these will shrink and grow the width of the website to simulate the device width changing. As this occurs the action bar will indicate which media queries are being matched/unmatched at a particular width.

To see some examples of sites that use media queries to adapt responsively visit Media Queries (http://mediaqueri.es/).

Note: The Media Queries website is not in anyway affiliated with, nor does it endorse this extension. It's just a really useful website that I've used in the screenshots purely for demonstration purposes.

KNOWN ISSUES

Occasionally you may find that the loading message does not disappear and you get an error popup. This is an known intermittent issue at the moment. Usually reloading the page and trying again solves it.

SOURCE CODE

This extension is open source under the MIT licence. See the Github project for details and code:
https://github.com/devilishio/seesponsive                    

拡張機能の基本情報

名前 Seesponsive Seesponsive
ID pplnkpfppfjanjgpbdfkbeeafjplcegi
公式URL https://chromewebstore.google.com/detail/seesponsive/pplnkpfppfjanjgpbdfkbeeafjplcegi
説明 Interactively see how a website's layout changes responsively
ファイルサイズ 50.46 KB
インストール数 288
現在のバージョン 1.0
最終更新日 2014-03-18
公開日 2014-03-18
評価 5.00/5 合計 1 レビュー
開発者 Simon Collins
支払い方法 free
対応言語 en
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "manifest_version": 2,
    "name": "Seesponsive",
    "description": "Interactively see how a website's layout changes responsively",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon19.png",
        "default_title": "Seesponsive"
    },
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "background": {
        "page": "event_page.html",
        "persistent": false
    },
    "permissions": [
        "webNavigation",
        "activeTab",
        "http:\/\/*\/",
        "https:\/\/*\/"
    ]
}