diff --git a/console/atest-ui/src/views/DataManager.vue b/console/atest-ui/src/views/DataManager.vue
index a525de0d..02a43d3b 100644
--- a/console/atest-ui/src/views/DataManager.vue
+++ b/console/atest-ui/src/views/DataManager.vue
@@ -336,7 +336,7 @@ const executeQueryWithoutShowingNativeSQL = () => {
     executeWithQuery(sqlQuery.value)
 }
 
-Magic.LoadMagicKeys(import.meta.url, new Map([
+Magic.LoadMagicKeys('DataManager', new Map([
   ["executeQuery", executeQuery],
   ["executeWithSelectedQuery", executeWithSelectedQuery],
   ["executeQueryWithoutShowingNativeSQL", executeQueryWithoutShowingNativeSQL],
diff --git a/console/atest-ui/src/views/StoreManager.vue b/console/atest-ui/src/views/StoreManager.vue
index 8b82d67c..59c91498 100644
--- a/console/atest-ui/src/views/StoreManager.vue
+++ b/console/atest-ui/src/views/StoreManager.vue
@@ -108,10 +108,10 @@ function addStore() {
     createAction.value = true
 }
 
-Magic.LoadMagicKeys(import.meta.url, {
-  "addStore": addStore,
-  "loadStores": loadStores,
-})
+Magic.LoadMagicKeys('StoreManager', new Map([
+  ["addStore", addStore],
+  ["loadStores", loadStores],
+]))
 
 const rules = reactive<FormRules<Store>>({
   name: [{ required: true, message: 'Name is required', trigger: 'blur' }],
diff --git a/console/atest-ui/src/views/TestCase.vue b/console/atest-ui/src/views/TestCase.vue
index c7165e77..90631f51 100644
--- a/console/atest-ui/src/views/TestCase.vue
+++ b/console/atest-ui/src/views/TestCase.vue
@@ -935,14 +935,14 @@ const openQueryTab = () => {
     testResultActiveTab.value = 'query'
 }
 
-Magic.LoadMagicKeys(import.meta.url), {
-  "sendRequest": sendRequest,
-  "openDuplicateTestCaseDialog": openDuplicateTestCaseDialog,
-  "openOutputTab": openOutputTab,
-  "openBodyTab": openBodyTab,
-  "openHeaderTab": openHeaderTab,
-  "openQueryTab": openQueryTab
-}
+Magic.LoadMagicKeys('TestCase', new Map([
+  ["sendRequest", sendRequest],
+  ["openDuplicateTestCaseDialog", openDuplicateTestCaseDialog],
+  ["openOutputTab", openOutputTab],
+  ["openBodyTab", openBodyTab],
+  ["openHeaderTab", openHeaderTab],
+  ["openQueryTab", openQueryTab]
+]))
 </script>
 
 <template>
diff --git a/console/atest-ui/src/views/TestSuite.vue b/console/atest-ui/src/views/TestSuite.vue
index a7a0a7b7..5c44b39f 100644
--- a/console/atest-ui/src/views/TestSuite.vue
+++ b/console/atest-ui/src/views/TestSuite.vue
@@ -153,10 +153,10 @@ function openNewTestCaseDialog() {
   querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, props.name!)
 }
 
-Magic.LoadMagicKeys(import.meta.url, {
-  "openNewTestCaseDialog": openNewTestCaseDialog,
-  "saveTestSuite": saveTestSuite,
-})
+Magic.LoadMagicKeys('TestSuite', new Map([
+  ["openNewTestCaseDialog", openNewTestCaseDialog],
+  ["saveTestSuite", saveTestSuite],
+]))
 
 const submitTestCaseForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
diff --git a/console/atest-ui/src/views/magicKeys.ts b/console/atest-ui/src/views/magicKeys.ts
index e03669f4..27d58c03 100644
--- a/console/atest-ui/src/views/magicKeys.ts
+++ b/console/atest-ui/src/views/magicKeys.ts
@@ -71,9 +71,8 @@ interface KeyBinding {
     action: string
 }
 
-const LoadMagicKeys = (url: String, mapping: Map<String, Function>) => {
-    const fileName = url.substring(url.lastIndexOf('/') + 1);
-    const pageName = fileName.split(".vue")[0];
+const LoadMagicKeys = (pageName: String, mapping: Map<String, Function>) => {
+    console.log(`Loading magic keys for page: ${pageName}`);
     API.GetBinding("default", (data) => {
         const bindings = JSON.parse(data.message) as KeyBindings;
         bindings.pages.forEach((page: Page) => {