內容簡介
我們都知道在 WordPress 中添加 script 或 style 時，我們應該使用 wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) 和 wp_enqueue_style( $handle, $src, $deps, $ver, $media )，例如：
function themeslug_enqueue_style() {
wp_enqueue_style( 'core', 'style.css', array('twentytwelve-style') );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' )
$deps（dependencies）是一個選擇性的數組參數，可以讓您控制 script 或 style 的加載時間和位置，如果 $deps 是 array('jquery')，您的 script 就會在 jquery 加載後加載。
問題是，哪些 script 或 style 存在，並且以什麼順序加載？
Debug Bar List Script & Style Dependencies 是 Debug Bar 的擴展插件，它可以列出這些依賴。
使用方法
查看所加載的 script 和 style：
前端: 進入前端，在管理選單中選擇 Debug 並查看 Script & Style Dependencies
後端: 在後端，選擇管理選單中的 Debug 並查看 Script & Style Dependencies
請注意，前端和後端加載不同的 script 和 style。此外，前端和後端的不同頁面可能會加載不同的 script 和 style。
外掛標籤
開發者團隊
② 後台搜尋「Debug Bar List Script & Style Dependencies」→ 直接安裝（推薦）
原文外掛簡介
We all know that when we’re add a script or style to WordPress, we should use wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) and wp_enqueue_style( $handle, $src, $deps, $ver, $media ) as in:
function themeslug_enqueue_style() {
wp_enqueue_style( 'core', 'style.css', array('twentytwelve-style') );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' )
$deps (dependencies), the handle name and an optional parameter, lets you control when/where your script or style should be added. If $deps is array('jquery'), your script will be loaded after jquery is loaded.
The problem is, which one exists and in which order are they loaded ?
Debug Bar List Script & Style Dependencies, an add-on to Debug Bar, will list the dependencies.
Use
To view the loaded scripts and styles
Front-end: Go to the front-end, and on the admin bar choose Debug and view Script & Style Dependencies
Back-end: Go to the back-end, on the admin bar choose Debug and view Script & Style Dependencies
Note, the front-end and back-end loads different scripts and styles. Also, different pages on the front-end and back-end can load different scripts and styles.
