指定したURLのページがDesign Studio上で表示されない場合の対応

jQueryやAngureJS、React.jsなど、Webシステムのフロントサイドの開発には様々な技術が利用されており、且つブラウザの種類やバージョンによってはそれらの技術が利用されているサイトを上手く表示できない場合もあります。

Design Studioに組み込まれたロボットエンジンも一つのブラウザであり、当該サイトで利用されている技術がその時点のバージョンでは対応していない場合もあります。

以下では、上記の原因によりフロントサイドのJavaScriptが正常に動作しない場合に試す価値のある方法について実例を用いながら解説します。

＜実例＞
ブラウザでは表示しているページをDesign Studioでロードすると、HTMLソースは表示されるのにもかかわらず、画面が空っぽのまま。

Browser Tracer（ブラウザトレーサ）にてページの読み込み処理状況を見てみると、Java Script の処理において React のエラーが発生しています。

Uncaught Invariant Violation： ［React Intl］ The Intl APIs must be available in the runtime, and do not appear to be built-in. An Intl polyfill should be loaded. See: http://formatjs.io/guides/runtime-environments/

React.js を使用しているサイトのようで、ブラウザ上でその処理がうまく行っていない様子です。

ページのソースを見ていくと、画面全体をJavaScriptで描画しており、指定したUser Agentにより処理の内容が変わるようです。

ロボットの Configure（設定）画面から、色々とUserAgentを変更して再読込してみると、以下の様に Android OS 用の UserAgent を指定した場合に問題の有るJavaScriptを避け、正しくページを表示することができました。

Mozilla/5.0 (Linux; U; Android 6.0; zh-CN; ALE-TL00 Build/HuaweiALE-TL00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

関連記事

【解決策】Webサイトを操作する際のWebブラウザエンジンの使い分けについて