Safari 11 でレスポンシブ・デザイン・モードのショートカットが消えた

Mac の設定でショートカットを作成することで、旧バージョンと同様に、レスポンシブ・デザイン・モードをショートカット（⌥⌘R）で切り替えられるようになります。

設定 > キーボード > ショートカット > アプリケーション > 「+」をクリック

下記の 2 つのショートカットを追加

アプリケーション：Safari
メニュータイトル：レスポンシブ・デザイン・モードにする
キーボードショートカット：⌥⌘R

アプリケーション：Safari
メニュータイトル：レスポンシブ・デザイン・モードを終了
キーボードショートカット：⌥⌘R

Mac: Yosemite の Safari で URL を全て表示する

Yosemite でデフォルトの Safari 8.0 では、
これまで URL が表示されていた部分にホスト名だけしか表示されません。

これまで通り完全な URL を表示する場合は、
Safari → 環境設定 → 詳細 → Web サイトの完全なアドレスを表示
で表示可能です。

Safari で直接 HTML を編集する

多くの Web ブラウザでは表示している HTML をリアルタイムに編集して、
表示を確認できる機能がデフォルトで付いています。

Mac + Safari の場合は
alt + command + I
で開発者ツールを出して、「リソース」をクリック。

編集したい要素で右クリック（ctrl + クリック）→ HTML として編集
を選ぶと、その場で HTML を編集して見栄えを確認できます。

style 属性をその場で書いて、CSS 調整の参考にすると便利です。

Mac の Safari で英単語の意味を簡単に調べる

わからない単語にマウスを乗せて command + control + D で辞書を引けます。
Magic Trackpad の場合は指３本でタッチすると辞書が引けた覚えがあります。

昨年購入した Magic Mouse と Magic Trackpad が両方とも故障してしまったので、
最近新しく Magic Mouse を購入したのですが、
Trackpad でできた辞書引きがマウスだとできなかったのでどうしたものかと調べていたら以下のサイトで解説されていました。

参考
Mac Safari使用中にキーボードショートカットで単語の意味を辞書で検索する方法 - インフォラティ
http://inforati.jp/apple/mac-tips-techniques/internet-hints/how-to-search-meaning-of-word-with-keyboard-shortcut-in-mac-safari-browser.html

Mac の Safari で iOS の Safari のデバッグ

Mac OS X の Safari で iOS の Safari をデバッグすることができます。

iOSデバイスの設定で Safari の Web インスペクタを ON にします。

iOSデバイスとMac OS X デバイスをケーブルで接続します。

iOS の Safari でデバッグしたいページを開きます。
Mac OS X の Safari を起動して「開発」からデバッグしたいデバイスを選択します。
iPad で表示しているページのデバッグを Mac 側で行えます。

Safari 7 のデバッグコンソール

Mac OS X Mavericks に付いてくる Safari 7 のデバッグコンソールがガラリと変わってますね。

なんか Xcode の上の方っぽいですね。
ちょっと触ってみましたがログのフィルタ機能は多分前はなかったと思います。
あと、コンソールに入力した JS のシンタックスカラーリングとかしてくれますね。

やっぱり Xcode っぽい。

Mac の Safari でクッキーを削除する

開発者ツールを使うと手早く削除できます。

削除したいクッキーのウェブサイトを表示して ⌘ + alt + I で開発者ツールを開く

データのアイコンをクリックするとクッキー一覧が表示される

クッキーリストから削除したいクッキーを選択して

control + クリック -> 削除 で削除できる

ちなみに、

Safari -> 環境設定 -> プライバシー -> 詳細 からも削除可能

デバッグ中はデバッグツールから削除したほうが便利でしょう。