Service Portalのページ上の動作が重いウィジェットを識別する方法 - Support and Troubleshooting

Service Portalのページ上の動作が重いウィジェットを識別する方法 Issue .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } サービス ポータル ページのどのウィジェットが遅いかを特定し、その読み込み時間を測定するには、この記事の手順に従います。

Release .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } サポートされている全てのリリース

Resolution .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } このスクリプトをコピーします。 ( async ( ) = > { let threshold = 1000 ; // only show load times for widgets higher than this value (in milliseconds) var wa = $ ( " div [widget='widget'] " ) . css ( " border " , " 1px solid red " ) . css ( " padding-top " , " 20px " ) . css ( " position " , " relative " ) let widgetTable = [ ] ; let wmk = [ ] ; for ( var i = 0 ; i wa . length ; i ++ ) { let widgetEntry = { } ; $0 = wa [ i ] let scope = $ ( $0 ) . scope ( ) ; try { var widget = scope . widget ; } catch ( e ) { console . error ( e ) ; continue ; } var timing = 0 ; let elem = $ ( " " + widget . sys_id + " '> " + widget . name + " & nbsp ; & nbsp ; " ) ; var printScope = $ ( " Print scope " ) . on ( ' click ' , function ( ) { console . info ( scope ) ; } ) ; elem . append ( printScope ) ; widgetEntry . name = widget . name ; widgetEntry . rectangle = widget . rectangle_id || ' undefined ' ; widgetEntry . sys_id = widget . sys_id ; let id = scope . widget . rectangle_id + " _ " + scope . $id // if this is not a nested widget, go ahead and refresh it. if ( ! scope . $parent || ! scope . $parent . widget ) { var widget_name = widget . name ; var t0 = performance . now ( ) ; await scope . server . refresh ( ) ; var t1 = performance . now ( ) ; timing = " " + id + " '> Load Time: " + parseInt ( t1 - t0 ) + " ms. " ; widgetEntry . load_time_ms = parseInt ( t1 - t0 ) || 0 ; elem . append ( timing ) ; } // add a button to refresh manually. var loadTime = $ ( " ⟳ " ) . on ( ' click ' , function ( ) { var widget_name = scope . widget . name ; let id = scope . widget . rectangle_id + " _ " + scope . $id var t0 = performance . now ( ) ; scope . server . refresh ( ) . then ( ( ) = > { var t1 = performance . now ( ) ; timing = " " + id + " '> Load Time: " + parseInt ( t1 - t0 ) + " ms. " ; widgetEntry . load_time_ms = parseInt ( t1 - t0 ) || 0 ; if ( $ ( ' # ' + id ) ) { $ ( ' # ' + id ) . remove ( ) ; } elem . append ( timing ) ; console . log ( " Call to " + widget_name + " took " + ( t1 - t0 ) + " ms. " ) ; } ) ; } ) ; elem . append ( loadTime ) ; $ ( $0 ) . append ( elem ) ; widgetTable . push ( widgetEntry ) ; } widgetTable . sort ( ( a , b ) = > ( a . load_time_ms > b . load_time_ms ) ? 1 : - 1 ) ; var slow = widgetTable . filter ( ( e , i , w ) = > { return e . load_time_ms >= threshold ; } ) ; let mkdn = ` |Name|sys_id|rectangle_id|Load Time Ms| |:---:|:---:|:---:|:---:| ${ slow . map ( ( widgetEntry , i , widgetTable ) = > { return ` | ${ widgetEntry . name } | ${ widgetEntry . sys_id } | ${ widgetEntry . rectangle } | ${ widgetEntry . load_time_ms } | ` ; } ) . join ( " \n " ) } ` ; var doCopy = function ( ) { var el = document . createElement ( ' textarea ' ) ; el . value = mkdn ; el . setAttribute ( ' readonly ' , ' ' ) ; el . style = { position : ' absolute ' , left : ' -9999px ' } ; document . body . appendChild ( el ) ; el . select ( ) ; document . execCommand ( ' copy ' ) ; document . body . removeChild ( el ) ; } var elem = ` z-index: 1; position: relative; left: -50%; /* or right 50% */ text-align: left; padding:10px"> ${ ( slow . length > 0 ) ? " Slow Widgets: " : " No Slow Widgets Found! " } ${ ( slow . length > 0 ) ? " table " : " none " } "> Name sys_id rectangle id load time ms ${ slow . map ( ( widgetEntry , i , widgetTable ) = > { return ` ${ widgetEntry . name } ${ widgetEntry . sys_id } ${ widgetEntry . rectangle } ${ widgetEntry . load_time_ms } ` ; } ) . join ( " " ) } ${ doCopy ( ) } style="display: ${ ( slow . length > 0 ) ? " table " : " none " } ">Copy Markdown ` ; $ ( ' body ' ) . append ( elem ) ; } ) ( ) ; 動作が重いポータルページを開きます。 JavaScript コンソールを開きます（Mac の場合は Command+Option+J、Windows の場合は Ctrl+Shift+J）。 スクリプトをコンソールに貼り付け、Enter キーを押します。 結果を確認します。 デフォルトでは、読み込みに 1 秒以上かかるウィジェットが出力に表示されます。 読み込み時間の制限を調整するには、スクリプトの先頭にあるしきい値を変更します。 各ウィジェットが更新され、色付きのボックスに読み込み時間がミリ秒単位で表示されます。 ページの下部に、しきい値以上のウィジェットを示す表が表示されます。 表ボタンを使用して、結果を Markdown 形式でクリップボードにコピーします。

その他の考慮事項 埋め込みウィジェットは親ウィジェットのパラメータに依存しているため、自動的に更新されません。必要に応じて手動で更新できます。

各ウィジェットには赤い枠線が表示され、読み込み時間がミリ秒単位で表示されます。

出力には以下が含まれます。

ウィジェット名（クリック可能なリンクとしてウィジェットエディターで開きます） ウィジェットのスコープを印刷し、読み込まれたデータを確認するボタン ウィジェットを更新し、読み込み時間を更新するボタン Related Links .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } }