Why is my console.log() not logging anything in my browser? - vue.js

I have a SSR page build on Nuxt (Vue). There is a simple code which runs in the browser.
methods: {
submitGeneralForm() {
alert("submit");
console.log('teeeeeeeeeeeeeeeeeeeeest')
},
SSR means that site it rendered on the server and then send to the browser. This piece of code should run in the browser. It is related to the button click. Alert works fine but I dont see any console.log() in the browser. Dont understand it. What is wrong with that?
EDIT:
Here is the example Github repository. Run yarn install + yarn dev to reproduce the issue. Node version v14.17.6 npm version 6.14.15 and yarn version 1.22.11 You will see alert() on page load from /layouts/default.vue which contains this code
export default {
mounted() {
alert('11111111111111');
console.log('22222222222222');
alert('33333333333333');
}
};
This is screenshot of console.log() in console.

Make sure you don't have anything in the console's filter input field.
For example, in the following image you can see the word "status" is masking the console.log() log lines:

I'm not sure why your code is not printing the console.log() since it's something basic and does not require any specific configuration.
I've tested your repro and it's working perfectly fine on both Chrome and Firefox. Maybe try another browser, factory reset it or ask a buddy to try on their side.
This is something on your machine IMO.
Also, be aware of the filter on top of the console, be sure that nothing is present here, otherwise it could filter the things you see in the actual console.

In your Browser you have a Console Output Section, where you also have some settings. There you can set the log levels, which should be in your output (Verbose, Info, Warnings and Errors). Console.logs are logged under the level Verbose, so you have to make sure this option is checked. By default this option is unchecked in some cases.

You have a filter, "status". It will filter anything which does not contain "status" keyword in it.

Related

Is there a way to change the browser locale in Cypress?

I have looked around online and quite a bit on stackoverflow and cant seem to find an up-to-date answer for this question. I have found other questions here, here, and here - and none of those solution work anymore. Does anyone know if this functionality is available in Cypress or if there's a way to force a locale change? Thanks
That's not too easy - as this differs from the browser you will be running your tests in.
Also, I believe that only are testing that your application looks and behaves right when the USER selected a specific language, you should consider adding a parameter when initiating your test session, e.g.
http://myapp.com/start?lang=en
then storing the selected language in LocaleStorage or a Cookie and selecting the language from there, as it is a lot more portable - and you will have users wanting to use your application in a different language than the browser default.
Still, There might be a few scenarios (e.g. if you want to tests, that your application detects the browser language correctly) where setting the browser language can be required, but I would suggest keeping tests that rely on a browser configuration to a minimum.
Is is possible tho, at least for Electron (verified with Electron 100) and Firefox (verified with Firefox 102). It used to work in Chrome too, but doesn't work for me anymore.
For Electron:
As Electron is being started along with the cypress GUI, changing the language afterwards is not possible. But you can expose an environment variable to the process, e.g.
ELECTRON_EXTRA_LAUNCH_ARGS=--lang=en npx cypress open
to start electron with the wanted locale.
For Firefox:
In your cypress.config.ts expand the defineConfig to contain such a block:
export default defineConfig({
// ...
e2e: {
// ....
setupNodeEvents(on, config) {
on('before:browser:launch', (browser, launchOptions) => {
if (browser.family === 'firefox') {
launchOptions.preferences['intl.locale.requested'] = "en_US"
return launchOptions
}
}
}
}
The Firefox Setup will only work, if you have no other Firefox instance running in another locale.

Sanity preview not working when I add or change content in Sanity Studio

I've been trying to get live preview in Sanity to work for several days now, without luck.
It works like a charm when I follow this tutorial:
how-to-quickly-set-up-a-gatsby-js-jamstack-website-with-a-headless-cms.
But when I create a starter blog like this one: sanity-template-gatsby-blog, it does not work at all.
I've followed three tutorials, but it always fails, even if I do exactly the same.
This is my gatsby-config:
module.exports = {
plugins: [
"gatsby-plugin-postcss",
"gatsby-plugin-react-helmet",
{
resolve: "gatsby-source-sanity",
options: {
projectId:"nt51j1jx",
dataset:"production",
token: "ABC123", //this is a dummy for this post
watchMode: true,
overlayDrafts: true
},
},
],
};
When I create a new post and click "web preview", I get a 404
It does not help to click publish, and I can't see any changes on the local host.
Changes to existing posts are also not visible.
I have to restart the server every time I want to see the changes. That's not the case with the first template I mentioned, but that one crashes when I try to install Sanitys code-input plugin, which I need.
Thanks in advance!
I finally solved it by following this post: https://www.frontendstumbles.com/gatsby-and-sanity-cms-tutorial/
A nice step by step guide that creates a Gatsby and Sanity starter that works with watch mode and drafts mode.
The preview environment must be rebuilt when you create a new page.
That's a new static html file to be built. This is different from live preview updates, which amend the page data client-side.
UPDATE: Sanity + Gatsby Cloud Live Preview is a known bug at the moment. I guess we join the Slack channel to hear when they fix it?

String functions not working in electron app

I have a .js file inside an electron app that uses the quasar framework.
inside this file i have axios to make requests to my api to pull data
once i get the response i use the data for further processing. However i need some string functions to escape some strings and when i try .replace it just fails.
var t = JSON.parse(JSON.stringify(someObj))
console.log(t.message.replace(/"/g, '\\"');)
the app just fails to build and tells me there is some error in x line. if i use console.log(t.message) i see that it print the text in the terminal console, so i know the value is not null.
Also when i hover my mouse over the variable it tells me (any) not sure what this means.
image:
P.S: this is my first time working this tech stack.
turned out there was a configuration issue with babel inside electron that was using quasar framework, it didn't not accept commonjs as module and hence no vanilla javascript would work.
Just had this issue myself, I know you've answered your own question but if you can use nodejs you can install replace-string from npm and use it
command: npm install replace-string
link:
https://www.npmjs.com/package/replace-string
This issue has literally caused me a morning of work - but hope someone finds this post and fixes this issue quicker!

TestCafe: Uncaught ReferenceError: pagespeed is not defined

New to TestCafe.
Expected
Given .js below, expected behavior when running testcafe chrome this.js is to click on the header logo.
Actual
Uncaught ReferenceError: pagespeed is not defined (at the click below).
On our prod site, this error doesn't happen so most likely some configuration (possibly my version of Apache?) but I wanted to make sure there weren't any TestCafe specific issues. Followed installation using the standard docs (npm)
Thanks in advance!
import { Selector } from 'testcafe';
fixture `A set of examples that illustrate how to use Little Passports`
.page `https://xxx.xxdev.us/`;
test('My Company', async t => {
await t.
click('.header-logo');
});
I think I'll currently get around this by adding -e, but I'll keep this open just in case there's something else to consider...
By default, a test fails when there is a JavaScript error on page. The "-e (--skip-js-errors)" parameter allows running tests by skipping this JS error.
To check if there are any errors on your page, open your browser console. If there are any, you can either fix the errors at the application level (a preferable approach) or skip them during test run using the "-e" parameter.

I am getting a "Bad response from Chimp Server" in my console when trying to run a meteor app with velocity/cucumber testing on it

The error is not in my regular console, it's in my tail -f console. It won't run the tests at all. In my localhost:3000 velocity sidebar it also says chimp server error. I am not sure how to fix this, I am very new to velocity and cucumber so it could be a stupid mistake, but I couldn't find any information on this error anywhere.
could you provide us with the whole meteor log and also cucumber log? If possible - please do meteor reset first (be aware though that this will clean up your local mongodb, if you want to avoid that, at least clean the cucumber log - echo '' > filePath will work )
I ran into the same problem yesterday while trying to follow Josh Owen's now outdated cucumber tutorial. The error was coming from with the step definition file while not wrapping module.exports in a function like this:
(function() {
module.exports = function() {
// ...
}
});
It could also be that your test directory and files aren't structured correctly in your app.
It should look like this:
app/
tests/
cucumber/
features/
step_definitions/
my_steps.js
my_feature.feature
fixtures/
my_fixture.js
Let me know if that makes a difference. Also, this is a good place to start with velocity/cucumber: http://www.mhurwi.com/a-basic-cucumber-meteor-tutorial/
It's very basic but there isn't much out there for learning testing with Meteor.