I have a tiny project with a bunch of images and vuetify.js library
Project works fine with vue serve or npm run serve
I then do npm run build, copy dist folder to my Raspberry Pi Zero v1.3 where it already runs a few other websites and they work fine
But when I open the built project in browser it just gives me infinite loading tab
Browser also throws "this tab is slowing down browser. Stop it?" kinda error
If I DO stop it I sometimes get this warning in console
"Script terminated by timeout at:" referring to chunk-vendors.js in FireFox or "RESULT_CODE_HUNG" in Chrome
Do I need to deploy code on the same computer I develop it on? Are there any spec requirements or do I need npm packages or something?
Also when I open the tab I can hear the fans in my PC speed up a bit if that helps
Also if I stop the tab the HTML structure is being shown but without images. Can that be the cause of this?
What version of vuetify.js are you using, there was a bug before version 3 in the v-slider: https://github.com/vuetifyjs/vuetify/issues/4746
Why can't I test on my phone(P40) with the apk file I've sent on Cloud Testing?
Please give instructions on how to install the program on your mobile phone.
Cloud Testing allows compatibility tests of your app on diverse real devices. The test automatically detects compatibility issues, including exceptions during app installation/reinstallation/uninstallation/launches, crashes, ANR problems, unexpected exit, running errors, UI errors, black/white screen issues, and exit failures. Please refer to Huawei's official guide in details:
https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-cloudtest-compatibilitytest-0000001082683302
Sign in to AppGallery Connect and click My projects.
Click your project from the project list.
Go to Project settings > Quality > Cloud Testing.
Click Test for free. For the first test, an introduction to Cloud Testing is displayed on the right of the page. Skip steps 6 and 7 for the first test and skip steps 4 and 5 if you have created a test.
Find the Compatibility test card and click Start now on the card.
Go to Quality > Cloud Testing. On the displayed test list page, click New test in the upper right corner
Click the Compatibility test tab
Click Upload (max 2 GB) in the Apps area to upload your APK. After the upload is complete, select the app to be tested and click Next.
Filter and select test devices as required. By default, all available test devices are displayed
Click OK. In the displayed Information dialog box, you can create another test or click View test list to go to the test result page.
Please note: A test may take about 60 minutes. You can also view the test result from the Cloud Testing service page. For details, please refer to steps 11 to 14.
But if you are asking about testing your APK on real device , then please use debug feature of tools like Android studio etc. To start debugging an APK, click Profile or debug APK from the Android Studio Welcome screen. Or, if you already have a project open, click File > Profile or Debug APK from the menu bar. In the next dialog window, select the APK you want to import into Android Studio and click OK.
For details , please refer to :
https://developer.android.com/studio/debug/apk-debugger
If you are facing issue in installing APK manually on P40 then try allowing File Manager/other apps to install unknown apps by going to Settings > Apps > Menu > Special access > Install unknown apps. Or if still unable to install APK ,please go to the device department website for help get more professional services. The link is:
https://consumer.huawei.com/en/support/
I'm developing my extension's options page with Vue, but when I run the dev server, I am not in my extension and therefore can't access chrome.storage.sync. Is there any way to allow access?
Right now, I have to run npm run build, which places the static assets in my chrome extension's directory and takes almost 30 seconds, and refresh the extension in chrome to test changes.
Please let me know if I haven't provided enough info.
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.
Enabled allow access to file URL’s option in the chrome extension
Added Vue.config.debug = true; Vue.config.devtools = true; just before new Vue({})
Added non-minified versions of VueJS file
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.
I could not get the Vue icon to be active on the menu bar, however I was able to get the Vue tab to show in the Chrome developer tools. Try the following:
Close the Chrome developer tools window
Hard refresh the browser
Re-open the developer tools window and look for the Vue tab
The icon in the toolbar might still indicate that it cannot detect Vue, but the tab should be visible in the Chrome developer tools.
I had this same issue, I was using minified vue from cdn "vue.min.js" .Then I removed that and used non-minified vue. Then I reloaded browser and reopened console and the vue tab was there.
For me, I was running a local HTML file. By default, Chrome blocks extensions from working on local files.
3-dot menu -> More Tools -> Extensions
Find the Vue extension, click details and change turn on the setting "Allow access to file URLs:
Screenshot
close & reopen chrome
Also found today that if you have an ad blocker installed that this also stops Vue Devtools from running properly.
Closing the file tab and reopening it worked for me.
Restart many times Google Chrome
Don't use min file
And add before new vue instantiation:
Vue.config.devtools = true;
chrome developer tools should be close before enabling the vue dev tools extention...
(if chrome devtools is open, close chrome development tools and re-open)
Just do a "hard reload" for a few times. On windows: SHIFT + F5.
On Mac: CMD + SHIFT + R.
Use the devtools beta for Vue 3. And always check if your Vue app mounted correctly.
Step 1: add vue.js devtools as an extension from here
step 2: After adding vue.js devtools, close your browser.
Step 3: Open your browser and open your html page.
Step 4: click right side of your mouse and select inspect and try to find Vue.
Note: If you didn't added the CDN of vue.js, then add these line to your html file.
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
You should enable Allow access to file URLs from Vue extension and then hard refresh your page with Shift + F5
It worked for me
(For Firefox Browser) If the add-ons 'Vue.js devtools' is added in browser..Just click on Inspect Element (or press F12) and there is a tab of Vue along with Inspector, Console, Network etc. Click on that Vue tab and enjoy debugging.
Just do hard reload and close development console then reopen it.
Hard Reload, help me.
Open devtools -> right click on reload button -> Hard Reload
Please make sure you don't use the production CDN. The only way that make it work for me is to use the VueJS dev version.
Development : vue.js
This happens to me periodically, pretty annoying because there seems to be no cause.
Go to Chrome browser extensions
Remove the Vue DevTools extension
Add it back again
Hard refresh your page
Chrome - Version 71.0.3578.98
MacOS Mojave 10.14
VueJS 2.5.21
close the chrome app
re-run development server
re-open chrome app
open localhost
press F12 (to open development tools)
In case you are using vue3, uninstall Vue devtool extension and install the beta version.
you can install it for chrome from the below link:
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
In #Daryn answer he mention that he has problems witch vue icon - here is solution to this part of running vue extension on chrome which in the same time also solve OP problem for me:
During plugin installation for short moment in upper right chrome corner the VUE ICON appears with message (screenshot is not my):
And CRITICAL is to click right button on that icon (without close that message!) and choose "PIN" (it pin to extensions icons bar) - if you not do it - then you will never see that icon again (which is mistake). After that shut down and reopen chrome. And now in you page with vue, this icon should have green colors (you can click on it) and click right button on some page element (or on screen center) and choose "Inspect" to see
maybe you can go to settings then go to preferences then look for persistence then enable local overrides, sorry my english is not good
Don't know if this helps but make sure to refer to app.js in your view file you are rendering in your current path. Laravel example from view file: <script src="{{ asset('js/app.js') }}" defer></script>
This way the vue extension starded working for me.
You should run
npm run watch
or
npm run dev
otherwise you can not see Vue Toolbar
Restarting Chrome worked for me
Maybe obvious but the Vue panel is not available when in incognito mode. In this case, the Vue icon is not visible either.
Enter chrome://extensions in the address bar and click on Details for Vue.js devtools. Scroll down to "Allow in Incognito" and switch to On.
don't forget about
npm run dev
(or something like in your project)
And then try advisions from first answers
I'm having a little trouble testing the appearance of modal windows with a website I'm helping to build. These modal windows are used to fill out forms and I'm writing tests to test if they appear and later to fill them in and test the submit functionality.
I'm using Codeception with the WebDriver module to test and frequently there are errors when trying to waitForElement with the modal. It doesn't always result in an error though, sometimes Codeception seems to see the modal and other times it doesn't.
I'm wondering if there is a better automated testing framework for testing Twitter Bootstrap modal windows or if I'm just not doing something right.