diff --git a/src/DevTools/DevTools.js b/src/DevTools/DevTools.js
index 59bb4ee..f323340 100644
--- a/src/DevTools/DevTools.js
+++ b/src/DevTools/DevTools.js
@@ -39,6 +39,7 @@ export default class DevTools extends Emitter {
     this._isShow = true
 
     this._$el.show()
+    this._navBar.resetBottomBar()
 
     // Need a delay after show to enable transition effect.
     setTimeout(() => {
diff --git a/src/DevTools/NavBar.js b/src/DevTools/NavBar.js
index 8ae1268..4b7566e 100644
--- a/src/DevTools/NavBar.js
+++ b/src/DevTools/NavBar.js
@@ -17,7 +17,7 @@ export default class NavBar extends Emitter {
   add(name) {
     this._len++
     this._$el.prepend(`<div class="eruda-nav-bar-item">${name}</div>`)
-    this._resetBottomBar()
+    this.resetBottomBar()
   }
   remove(name) {
     this._len--
@@ -25,7 +25,7 @@ export default class NavBar extends Emitter {
       const $this = $(this)
       if ($this.text().toLowerCase() === name.toLowerCase()) $this.remove()
     })
-    this._resetBottomBar()
+    this.resetBottomBar()
   }
   activateTool(name) {
     const self = this
@@ -35,7 +35,7 @@ export default class NavBar extends Emitter {
 
       if ($this.text() === name) {
         $this.addClass('eruda-active')
-        self._resetBottomBar()
+        self.resetBottomBar()
         self._scrollItemToView()
       } else {
         $this.rmClass('eruda-active')
@@ -67,7 +67,7 @@ export default class NavBar extends Emitter {
 
     container.scrollLeft = targetScrollLeft
   }
-  _resetBottomBar() {
+  resetBottomBar() {
     const $bottomBar = this._$bottomBar
 
     const li = this._$el.find('.eruda-active').get(0)