This is started happening recently on my project, so I created a fresh project using vue cli 2.
I have not added any this else
In App.vue I have added 3 event listeners in mounted function.
window.addEventListener("keydown", () => {
console.log("Key down");
})
window.addEventListener('keyup', () => {
console.log("Key up");
})
window.addEventListener("keypress", () => {
console.log("Key press");
})
This above code prints all the events on Firefox and Safari, but not in chrome.
It also works in chrome incognito but not in normal mode.
Also this is only happening on mac machine.
Also this only occurs when I am using vue
If i create a standalone html file the code return all the 3 events.
Any debugging idea is also appreciated.
Related
i started a new application with vue3 (created with vue-cli) and I'm not able to exploit native debugger in chrome
I have read that I had to specify the source map in my vue.config.js
module.exports = {
pluginOptions: {
quasar: {
importStrategy: 'kebab',
rtlSupport: false
}
},
configureWebpack: {
devtool: 'source-map'
},
transpileDependencies: [
'quasar'
]
}
But I'm still not able to explore my component code with a debugger
the result I have
screenshot not working
and what i want (screen from a vue2 project)
screenshot working
To use the native js debugger in a vue 2 application. You can do something like this:
methods: {
doSomething () {
this.loading = true
// doing something
debugger // native js debugger, in console check => this.loading (= true)
this.loading = false
}
}
Hopefully, it works the same way in vue 3.
You may be tempted to use it in the life-cycle hooks such as mounted, created ... but unfortunately, that never worked for me. Once the debugger halts the program, you can test it in the console by seeing what kind of object this identifies as.
When the native js debugger is used in a method enclosed by the methods option, it acts in a helpful and expected way. However, when it is used in a lifecycle hook like created the this object is not what you would expect it to be.
Additionals:
I actually stumbled on this question because I was looking for ways to use the native js debugger in the life cycle hooks. I'm hoping there might be vue 2 life-cycle hooks that support it.
I am running tests and receive unnecessary console.info texts in terminal, I would like to get rid of:
console.info
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
at node_modules/vue/dist/vue.common.dev.js:9051:47
console.info
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
at node_modules/vue/dist/vue.common.dev.js:9060:45
const { Nuxt } = require('nuxt')
const nuxtConfig = require('../../../../nuxt.config.js')
let nuxt = null
beforeAll(async () => {
nuxt = new Nuxt({
...nuxtConfig,
buildDir: constants.buildDir
})
await nuxt.server.listen(constants.port, 'localhost')
}, 300000)
I've tried to put vue.config silent property in various places in code above, but also into nuxt.config.js, but I got no luck doing so. I've tried this snippet: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-vue-config/
export default {
vue: {
config: {
productionTip: true,
devtools: false
}
}
}
How to turn off console.info messages?
You could right click on the message in your devtools console and go with Hide messages from vue.runtime.esm.js. It will hide it from your console thanks to a filter. Do not solves the real problem, but a nice and quick fix.
Pretty much as here: https://superuser.com/a/995289/850722
I am currently using window.onbeforeunload function on my vue to detect browser's closing or reloading tab to show a like below.
mounted: function () {
window.addEventListener('beforeunload', this.confirmSave)
},
methods: {
confirmSave(event) {
if (this.onChangeMode) {
event.returnValue = 'You have some unsaved changes'
return 'You have some unsaved changes'
}
},
},
It's working perfectly on PC Chrome but not working on iPad (both Safari and Chrome). My iPad version is 14.0.1.
I also tried something else like pagehide but not working either.
I'm using the latest version of React Native. I'm trying to console log something whenever the headset button is clicked on Android. So far, I've been unsuccessful.
I tried the react-native-music-control. In the docs it says that
MusicControl.on('togglePlayPause', ()=>{console.log('clicked')})
should work. But I'm not sure if its only for ios or android too.
This is my componentDidMount (the render returns a 'hello' text).
componentDidMount() {
MusicControl.enableControl('play', true);
MusicControl.enableControl('pause', true);
MusicControl.enableControl('stop', true);
MusicControl.enableControl('togglePlayPause', true);
MusicControl.on('play', () => { console.log('----'); });
MusicControl.on('pause', () => { console.log('----'); });
MusicControl.on('togglePlayPause', () => { console.log('----'); });
}
'----' is logged only when I disconnect the headset and not any other time.
The official doc on github says:
MusicControl.on('togglePlayPause', ()=> {}); // iOS only
The iOS only comment states pretty clearly that this event is only available on iOS and would not trigger on Android
So, the package react-native-keyevent works really well with android. After linking the package, I had to configure it in the MainActivity.java (which I was skipping by mistake).
After I did that, it worked properly in Android.
I'm creating an app visually similar to Alfred to manage and search for my bookmarks. Its working well, but when I do a search and open a bookmark, I immediately hide the app and when I invoke it again, it return to the default mode doing a visual flash. The reset to default is triggered right before hiding the app.
I hide the application like this : remote.app.hide() and I added a listener on win.hide in my components to reset the vue.
It works, but the reset is processed after the application show up again.
I don't know how to do it when the application is hide or to show up it right after the vue is reloaded.
If you have any clue, it would be great.
I created a sample project on Github you can clone and test this issue.
Github Project
I'm working on macOS at the moment.
Thank you.
I found an easy way, you cannot rely on the window.on('hide') event.
So in your shortcut registration, I made your app emit a custom event that your Vue.js will listen to reset your input before hiding the app:
main.js
const retShow = globalShortcut.register('CmdOrCtrl+Alt+V', () => {
if (!win.isVisible()) {
win.show()
} else {
app.emit('hide-window'); // Let the window hide the app
}
})
In your Vue.js app, in the created hook:
app.js
app.on('hide-window', function () {
vm.reset();
setTimeout(app.hide, 10);
});
Here my pull request: https://github.com/Cronos87/electron-vue-flash-issue/pull/1/files