VueJs开发工具面板未显示

I started using vue dev-tools in my application but it is not visible when in developer mode in Chrome. I tried various solutions found on the dev-tools github page and in other places on the web, but no luck. Below are the things i have done/tried to get it to display.

  1. Enabled allow access to file URL’s option in the chrome extension
  2. Added Vue.config.debug = true; Vue.config.devtools = true; just before new Vue({})
  3. Added non-minified versions of VueJS file
  4. Also I am using Chrome latest version: 55.0.2883.87.

I do get the following message when I click on the chrome extension 在此处输入图片说明

Except the panel is not actually showing.

Does anyone have a solution to this? Thanks.