chinchang / web-maker

A blazing fast & offline frontend playground
https://webmaker.app
MIT License
2.55k stars 314 forks source link

Console not working when offline #475

Open ghost opened 2 years ago

ghost commented 2 years ago

Meta info

When I am offline, the console stops working.

LeFede commented 2 years ago

I have this problem too. While using the app on the website the console works fine. But when using the chrome extension, console.log doesn't work properly.

ghost commented 2 years ago

I started off coding in this too, but I have moved to just using DevTools workspaces in chrome directly. It has all the features you wish that webmaker had including being able to open up and use offline, with none of the bugs (even though you do sacrifice the auto run/save code feature of WebMaker, it is far superior to VSCode online, that does have those features). If that's not your cup of tea, VSCode has an online version with auto save that you can open up while you're online, and then use offline too (and you could use it with the CodeSwing extension for that familiar auto run code and side by side windows feeling that WebMaker provides.)

Personally, I recommend DevTools workspaces. It way out features VSCode online (minus the keyboard shortcuts...) and is amazing for whatever you're trying to code. Especially CSS, which does auto save in your files when you edit it under the styles tab. It has autocompletion, and allows you to select elements with your mouse based off their position on the page. And it has a full working console, which VSCode lacks online.

If you are like I was and have never coded using a filesystem, then here's some links to get you started: How to organize your coding folder How to embed your javascript file in your index.html file (preferably at the end of the body tag) How to embed your styles.css file in your index.html file How to structure the HTML of your index.html file in the first place

I hope this helps! I would have attached my coding template folder, but github wouldn't allow me (probably because if I knew how I theoretically could put malicious code on it, which makes sense, but is annoying for our situation.) Happy coding!

chinchang commented 2 years ago

opening this as this is an actual issue. Will look into this soon

golam71 commented 2 years ago

the security policy chromium does not support it if you open dev tools in the extension web page you can clearly see it

Refused to load the script 'chrome-extension://lkfkkhfhhdkiemehlpkgjeojomhpccnh/lib/screenlog.js' because it violates the following Content Security Policy directive: "script-src 'self' filesystem: http://localhost: https://localhost: https://apis.google.com https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.gstatic.com https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

francisfernandez commented 2 years ago

Getting the same CSP error, unable to use console from the app. Thanks