[{"data":1,"prerenderedAt":172},["ShallowReactive",2],{"article-vue-dev-tools-for-iframe":3,"authors":156},{"id":4,"title":5,"author":6,"body":7,"date":146,"description":147,"extension":148,"meta":149,"navigation":150,"path":151,"seo":152,"stem":153,"thumbnail":154,"__hash__":155},"article\u002Farticle\u002Fvue-dev-tools-for-iframe.md","Vue Dev Tools For iFrame","ashwin",{"type":8,"value":9,"toc":141},"minimark",[10,14,19,22,51,55,58,67,70,110,117,131,134,137],[11,12,13],"p",{},"As of writing this article, there is no good way to see vue-devtools when developing apps in iFrame. Hence I found out this following way to use the vue-devtools via this electron app.",[15,16,18],"h2",{"id":17},"installation","Installation",[11,20,21],{},"Install the vue-devtools package.",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-shell shiki shiki-themes material-theme-darker","npm install -g @vue\u002Fdevtools\n","shell","",[30,31,32],"code",{"__ignoreMap":28},[33,34,37,41,45,48],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"s5Dmg","npm",[33,42,44],{"class":43},"sfyAc"," install",[33,46,47],{"class":43}," -g",[33,49,50],{"class":43}," @vue\u002Fdevtools\n",[15,52,54],{"id":53},"configuration","Configuration",[11,56,57],{},"Once you install the package globally, run",[23,59,61],{"className":25,"code":60,"language":27,"meta":28,"style":28},"vue-devtools\n",[30,62,63],{"__ignoreMap":28},[33,64,65],{"class":35,"line":36},[33,66,60],{"class":39},[11,68,69],{},"Then add:",[23,71,75],{"className":72,"code":73,"language":74,"meta":28,"style":28},"language-javascript shiki shiki-themes material-theme-darker","\u003Cscript src=\"http:\u002F\u002Flocalhost:8098\">\u003C\u002Fscript>\n","javascript",[30,76,77],{"__ignoreMap":28},[33,78,79,83,87,91,94,97,100,102,105,107],{"class":35,"line":36},[33,80,82],{"class":81},"sAklC","\u003C",[33,84,86],{"class":85},"s-wAU","script",[33,88,90],{"class":89},"sJ14y"," src",[33,92,93],{"class":81},"=",[33,95,96],{"class":81},"\"",[33,98,99],{"class":43},"http:\u002F\u002Flocalhost:8098",[33,101,96],{"class":81},[33,103,104],{"class":81},">\u003C\u002F",[33,106,86],{"class":85},[33,108,109],{"class":81},">\n",[11,111,112,113,116],{},"To the ",[30,114,115],{},"\u003Chead>"," section of your app.",[118,119,120],"blockquote",{},[11,121,122,126,127,130],{},[123,124,125],"strong",{},"Note:"," ",[128,129],"br",{},"\nDon't forget to remove it before deploying to production!",[11,132,133],{},"That's it! You can now view the devtools on running of your application.\nNow you can debug your app opened in a mobile browser, safari, native script, etc. not just desktop chrome or firefox.",[11,135,136],{},"Hope you found this short article useful. If so hit 👍🏻 and spread the word!",[138,139,140],"style",{},"html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":28,"searchDepth":142,"depth":142,"links":143},2,[144,145],{"id":17,"depth":142,"text":18},{"id":53,"depth":142,"text":54},"2020-08-05T03:55:00.000Z","Let's learn how to use vue dev-tools for iframe","md",{},true,"\u002Farticle\u002Fvue-dev-tools-for-iframe",{"title":5,"description":147},"article\u002Fvue-dev-tools-for-iframe","\u002Fimg\u002Fvue-devtools-iframe.jpg","r9YF-BrSxF9pbTXi5PD1BXTR8WJhsqIhX3aOeNLnUf8",{"id":157,"extension":158,"meta":159,"stem":170,"__hash__":171},"author\u002Fauthor\u002FauthorDetails.json","json",{"body":160},[161,165],{"id":6,"fullName":162,"description":163,"image":164},"Ashwin K Shenoy","Hi! I am Ashwin, an Software Engineer and Consultant based out of Bengaluru, India.","https:\u002F\u002Fsimpletech.xyz\u002Fimg\u002Fauthor\u002Fashwin.jpg",{"id":166,"fullName":167,"description":168,"image":169},"paul","Paul Shan","Hello! I am Paul, a front end engineer and consultant based out of Bengaluru, India.","https:\u002F\u002Fashwinshenoy.com\u002Fimg\u002Fashwin2.jpg","author\u002FauthorDetails","k8atXxcwAcv_rjC8llPba18X62upiKWYGU5dL4-S4lw",1782187479716]