フォームの Javascript エラーのトラブルシューティングIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } フォームの Javascript エラーのトラブルシューティング |ヘルプ、フォームが壊れています! 概要 Javascript エラーが原因でフォームが壊れる現象には次のようなものがあります。 クリックスルーや虫眼鏡などの参照アイコンをクリックできないフォームまたはフォームオブジェクトで ServiceNow 右クリックコンテキストメニューを使用できない保存や更新など、一部またはすべての UI アクションを使用できない特定のフィールドにデータを保存できないフォームが完全にロードされない フォームが壊れる原因としては、次のようなものがあります。 エラーをスローするクライアントスクリプト/UI ポリシー/UI スクリプト誤った形式のフォーマッターグレムリン 上記のリストはすべてを網羅しているわけではありませんが、直面する可能性のある問題のサンプルを示しています。この記事では、問題の内容と原因を判断するために使用できる、ややアルゴリズム的な方法とトラブルシューティング理論について説明します。 必須条件 お好みのブラウザの開発ツールに慣れていない場合は、この記事から離れて、その使用方法について何があるかを確認する良い機会です。この記事のスクリーンショットと具体的な手順は Chrome を使用していますが、ほとんどのブラウザには同様の機能があります。 いくつかのリソース: Chrome 開発ツールFirefox 開発ツールSafari 開発ツールEdge 開発ツール はじめましょう！ 物事がうまくいかず、フォームを完全に壊す可能性のある場所がいくつかあります。以下は一般的な問題の原因の完全なリストですが、Service Nowのような規模のプラットフォームではいつものように、このリストはすべてを網羅しているわけではなく、あなたを夢中にさせる1回限りの項目が常にあります。とはいえ、以下の場所とトラブルシューティング手順を十分に理解していれば、発生する可能性のあるフォームの問題のほとんどを適切に処理できるはずです。問題は、科学的に集計されたわけではありませんが、最も一般的な原因から最も一般的でない原因の順にリストされています。 クライアント側スクリプティングの競合/エラー UI ポリシーClient Script (クライアントスクリプト)UI スクリプトUI アクションビジネスルールを表示 サーバー/クライアント側のスクリプティングの競合/エラー UI マクロ/UI ページ UI フォーマッター参照先の装飾 フォームのフィールドが重複していますフォームにフィールドがありません埋め込みリスト関連リスト 不正なデータ欠損リレーションシップ エラーメッセージを使用したエラーのデバッグ 最初のステップは、常にブラウザの Javascript コンソールでクライアント側のエラーを確認することです。運が良ければ、表示されている問題は、特定のコードの場所を含むエラーをスローします。そうすることで、クライアントスクリプトなどの特定のスクリプトを簡単に追跡できます。コンソールエラーは、次のようになります。 ご覧のとおり、エラーがあります。この時点で、右クリック、先行入力、および虫眼鏡は参照フィールドで機能しなくなり、このフォームを表示するときに他のさまざまな問題が発生する可能性があります。コンソールエラーがあるため、問題の原因に焦点を合わせることができる場合があります。赤で表示されたエラーの部分から、スタックを見ると、UIポリシーを評価していることがわかります。 Uncaught ReferenceError: ... at ui_policy_onLoad 5行ほど上を見ると、sys_idのように見えるものがあることがわかります。 316b1990db54fa00ea325404ce961903 その情報を入手したら、問題の UI ポリシー (sys_id = 316...) を呼び出し、コードの問題が発生している場所を特定し、問題が何であるかを把握できます。sys_idを見つけるのは必ずしも簡単ではありませんが、エラーをスキャンするか、エラーをクリックして表示されるコードを上向きにスキャンすると、通常、どのアイテムが問題を引き起こしているかについての兆候を見つけることができます。あまり時間をかけすぎないようにしましょう。sys_id を簡単に見つけて一致するレコードが見つかった場合は、そのレコードをオフにして問題が解決するかどうかを確認します。それでも解決しない場合は、次のより抜本的な方法に進む時です。 その他のエラーへの対処 おそらくお気づきかと思いますが、多くの問題では、適切なエラーメッセージが表示されません。最初の例のように分かりやすいエラーが発生する回数は、フォームが壊れていても原因やエラーがすぐに見つからないケースの回数を下回ることが多いと思われます。そうなったら、より強力な手法を使って、問題が解消されるまですべてを無効にする時です。エラーの種類に応じて、ある場所から開始するか別の場所から開始するかがありますが、一般的に、次の項目を試す特定の順序はありません。問題が発生しなくなるまで続行してください。どのような種類のオブジェクトが物を壊しているかを特定したら、問題の原因となっている特定のオブジェクトを見つけて、さらに掘り下げることができます。 出発点: クライアントスクリプトUI ポリシーグローバル UI スクリプトフォーム要素 フィールドフォーマッタ埋め込みリスト 関連リスト 上記の各項目に対する最も迅速で簡単な方法は、それらをすべてオフにして (active=false)、テストすることです。これは、クライアントスクリプト、UI ポリシー、およびグローバル UI スクリプトでは機能しますが、active=false に設定するほど簡単ではありません。フォーム要素と関連リストについて、問題のフォームの新しいビューを作成します。 一般に、右クリックコンテキストメニューを使用して フォームレイアウト>設定できない場合でも、ヘッダーのメニューアイコン をクリックしてそのオプションを見つけることができます。[フォームレイアウト] ポップアップが開いたら、新しいビューを作成し、表示列 (通常は数値) を除くすべてのフィールドを削除します。 問題を再現できなくなった場合は、フォーム上の要素に関連していることがわかります。それでも動作が発生する場合は、新しいフォームビューで >関連リストを構成 を使用し、それらもすべて削除する必要があります。 この時点で、どの一般的な領域が問題を引き起こしているかがわかり、次のセクションに進むことができます。全般的な領域がわからない場合や、すべてのクライアントスクリプト、UI ポリシー、グローバル UI スクリプト、フォーム要素、および関連リストを既にオフにしていても問題が解決しない場合は、ServiceNow カスタマーサポートでインシデントをオープンしてください。 原因を見つける: このセクションを読んでいる場合は、現在無効になっている要素のうち、具体的に問題の原因となっているものを特定する必要があります。これを行うには、ほとんどの場合、50/50 メソッドを使用します。既にすべてのアイテムをオフにするか、フォームからすべてのアイテムを削除したため、半分をアクティブに戻すか、半分をフォームに戻します。次に例を示します。 例として、8つのクライアントスクリプトがあり、それらがオフになっていると問題が発生しないことがわかっています。そこで、4 を選択してオンに戻します。これら 4 つをオンにしても問題は発生しないため、残りの 4 つのうち 2 つを選択してオンに戻します。問題が再び発生し始めることに気付きました。そのため、オンに戻したばかりの 2 つのうち、そのうちの 1 つをオフにすると、問題は発生しなくなります。これで、問題の原因となっているのは、オフにしたばかりのものであることがわかりました。もしそれが逆だったら、つまり電源を切っても問題がまだ発生していたら、それが私が触れていないものであることがわかるでしょう。 より視覚的な学習者の場合は、以下の表を参照してください (青色は「このステップで変更」を示します)。 すべてを無効にした後の開始位置: Client Scripts (クライアントスクリプト)true または falseCS1falseCS2falseCS3falseCS4falseCS5falseCS6falseCS7falseCS8false 結果:問題なし Client Scripts (クライアントスクリプト)true または falseCS1trueCS2trueCS3trueCS4trueCS5falseCS6falseCS7falseCS8false 結果:問題なし Client Scripts (クライアントスクリプト)true または falseCS1trueCS2trueCS3trueCS4trueCS5trueCS6trueCS7falseCS8false 結果:問題 Client Scripts (クライアントスクリプト)true または falseCS1trueCS2trueCS3trueCS4trueCS5falseCS6trueCS7falseCS8false 結果:問題 この場合、CS6 が原因であることがわかります。最後のフリップが逆方向に進んだら、次のようになります。 Client Scripts (クライアントスクリプト)true または falseCS1trueCS2trueCS3trueCS4trueCS5trueCS6falseCS7falseCS8false 問題は 5 と 6 がオンのときに発生しましたが、5 がオンのときには発生しなかったため、CS6 が原因であることはまだわかっていたでしょう。 これで、クライアントスクリプトに移動して原因を特定できます。構文エラーはありますか?フォームに存在しないフィールドを参照していますか?問題は多岐にわたりますが、どのスクリプトが問題を引き起こしているかを知ることは、簡単に戦いの 85% です。 フォーム要素の場合、プロセスは同じですが、オブジェクトをアクティブ化または非アクティブ化するのではなく、フォームに追加または削除するだけです。問題の原因を絞り込んだら、そのフィールド/リストなどが他のフィールドと何が違うのかを確認し、そこから先に進むことができます。 したがって、問題の原因はわかっていますが、その理由がわかりません 全力を尽くされたことと思います。問題の原因となっている要素を特定し、その要素が機能していないと問題が発生しないことも確認済みです。しかし、注意深く調べても原因が分からない場合はどうすればよいでしょうか？ https://instance.service-now.com/cache.do に移動して、インスタンスキャッシュをクリアしてみてください。 それでも問題が解決しない場合は、ブラウザのキャッシュをクリアしてみてください。 まだ何もありませんか? そこで ServiceNow カスタマーサポートの出番です。ケースをオープンして次のことを説明します。 「<この要素>を<有効にする/フォームに追加する>と問題が発生します。問題のアイテムを調査しましたが、原因を特定できません。ご支援をお願いします。」 代わりに: 「フォームを右クリックできません。」 重要なユーザー情報や問題の再現に必要なものなど、再現に必要なすべての手順を忘れずに含めてください。的を絞った情報があれば、カスタマーサポートはすぐに調査に入り、お客様の要求に対してより迅速に対応できるようになります。 Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } }