WEB Tips デザイン・コーディング

Dreamweaverでリアルタイムプレビューできない場合の解決方法

2017-10-27

本記事にはプロモーションが含まれています。

Dreamweaverでリアルタイムプレビューできない場合の解決方法

Dreamweaverを使っている時にF12でブラウザプレビューして確認するのが昔からの操作方法だったのですが、CCから?リアルタイムプレビューという機能になっています。

Browsersyncみたいに修正と同時に自動的に更新されるんですよねきっと。

このリアルタイムプレビューがWindow10環境でなぜか表示されない。。。

おそらくアンチウィルスソフトやファイヤーウォールの影響かなと思っているのですが、明確な原因はわかっていません。

でもこの記事の手順でリアルタイムプレビューが表示されるようになりました。Adobeのサポートページにも載っていますが、リアルタイムプレビューされない問題を解決する手順は以下の通りです。

Adobe CCのプランを比較するなら

Adobe CC コンプリートプランと単体プラン、どちらを選ぶべき?
Adobe Creative Cloud プランの比較

1)NodePort.jsonファイルを作成

NodePortという名前のjsonファイルを作成し、リアルタイムプレビューで使用するポートを記述します。

{
"previewport" : portナンバー
}

使用するポートが8000番の場合は以下のようになります。

{
"previewport" : 8000
}

2)NodePort.jsonの保存場所

作成したNodePort.jsonをDreameweaverの設定関連のディレクトリへ保存します。

Windowsの場合:

%appdata%\Adobe\Dreamweaver CC 2017\ja_JP\Configulation

Macの場合:

~/Library/Application Support/Adobe/Dreamweaver CC 2017/ja_JP/Configuration

3)Dreamweaverを再起動する

ドリームウィーバーを再起動してリアルタイムプレビューを確認してみます。

表示されるようになりました!

今回の対処法で必ず解決するわけではないと思いますので予めご承知おきください。
こちらの方法も含めて詳しくはAdobeサポートページに記載があります。

こちらもおすすめ 2024年最新 Adobe CC コンプリートプランを安く更新できる!一番安い購入方法

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大30%キャッシュバッグ月額693円&ドメイン永久無料 - 2024年5月1日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年4月19日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-,