Develop Reference

QR Scanner wasm

I have built a laravel app which implements this qr scanner: https://github.com/maslick/koder
(I am using the Vanilla code version)
But when I visit the page where the qr scanner is enabled, camera starts but I can't see the video feed on the screen.
I don't get any console errors just these messages:
all.js:9 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
all.js:9 falling back to ArrayBuffer instantiation
DevTools failed to load source map: Could not load content for
chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map:
HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools
failed to load source map: Could not load content for
chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map:
HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools
failed to load source map: Could not load content for
http://localhost/my-qr/public/js/popper.js.map: HTTP error: status
code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Any suggestions why this is happening? I tried in chrome and in firefox but still tha same problem.
This is the blade code:
#extends('layouts.app')
#section('content')
<div class="canvas" style="width:100%;">
<canvas id="canvas"></canvas>
</div>
<div class="scanBtn">
<a id="btnStart" class="myHref">start scan</a>
<a id="btnStop" class="myHref">stop scan</a>
</div>
<div class="barcode" id="result" style="background:white"></div>
#endsection

I am the author of koder. Here is what you can try:
Test the vanilla-js version here. You could try different devices, laptop, mobile phone, tablet.
While testing/debugging your app, make sure you serve your app via https. You could use a self-signed certificate. It turns out in some web-browsers navigator.mediaDevices.getUserMedia is available only in secure contexts (HTTPS). See details here. As a result the browser does not start your camera.
To debug, checkout the repo and run:
$ yarn run vanilla-js-live
$ open http://localhost:8081
This will start a simple webserver and serve the vanilla-js example app on port 8081. The 2nd command will open your web-browser.
Although it works when served on localhost via http on a laptop (I am running Mac OSX 11.6, Chrome 96.0.4664.110), it may not be the same in your case. Especially if you start the webapp on your laptop (e.g. on 0.0.0.0:8081) and connect to it (e.g. http://LAPTOP_IP:8081) from your mobile phone, which is on the same Wifi network. Keep this in mind.
All above is meant for debugging the demo app. Your web-app is served by PHP, and you should account for that. Never the less, there's not much difference, whether it is served by PHP, nginx or AWS S3, if integrated correctly.

network request failed when running expo app on android device

I am using a localhost server for my app development on expo. I get this error on my android device.
My server and api works fine as I have tested it on postman. It works well in the browser too. I am already using my ip address in the fetch function instead of localhost.
The fetch also works fine on genymotion android emulator. The issue is only on my actual android device.
Thanks

Solved the issue finally. The issue was my firewall(ufw) which was not allowing access for public ports.
sudo ufw allow from 192.xxx.x.xxx to any port 80 helped me as it allows acces to publicly open ports.
Thanks

sending console JS commands to an Electron app

I'm looking to automate an existing Electron app. It gives access to the Developer Tools, so I could just paste Javascript code into the console, but there must be a way to do this remotely, ideally using Node or from the Terminal?
I've seen this option for running Chrome : --remote-debugging-port=9222 ... that hints at a solution but I can't seem to get closer.

If you launch your Electron app with --remote-debugging-port=9222 then you will enable remote debugging via Chrome DevTools protocol. You can use a Chrome developer tools instance as a client, or use one of the clients here: https://github.com/ChromeDevTools/awesome-chrome-devtools#chrome-devtools-protocol
The debuggable Chrome instance will be running on localhost:9222. Which means as long as you are trying to debug from the same machine you are fine. However if you want to debug from a remote machine you need some additional setup.
Setup an SSH tunnel on the source machine:
ssh -L 0.0.0.0:9223:localhost:9222 localhost -N
This will accept incoming traffic on the 9223 port and route it to Chrome remote debugging.
Then on your client machine use the address: source-machine-ip:9223 to access the remote debugging.
Note: This may not work on Windows without additional SSH setup as SSH is not prepackaged with Windows.

No targets shown in WEINRE (Cordova/PhoneGap)

I've been trying to connect my device to weinre, yet I cannot see any target device in it.
This are the steps I'm following:
Creating project in Cordova
Adding android platform to the project
Adding the weinre script to my project's index.html
Initiating weinre server in my computer
Pinging both devices IP from each other to ensure they can see each other over the network
Opening weinre server in my chrome browser
Running my App
No target ever appear
Please if I'm doing something wrong tell me, but can't see, to connect any target itno my weinre server.
Best regards.

How to see Console log output in samsung galaxy S2

I am using samsung galaxy s2 version 2.3.3, i open a web page in android default web browser.
In the Page i put console.log("some info") to debug the page, but i am unable to see the console.log output in my device.Please help me in this.Thanks in advance.

Warning: No Longer Working!
This solution appears to no longer be functional as the web tool has not been maintained over the years.
Try using JSConsole.com. It's a remote debugger for JavaScript. The setup is basically just injecting a <script> tag in your page. Once connected you can read all the console.log calls from the remote page on JSConsole, as well as execute commands on the client.
Steps to Setup
Go to JSConsole Home Page, and type :listen.
Copy the resulting <script src="http://jsconsole.com/remote.js?..."></script>.
Drop that into the page you need to debug.
Open your page in any browser (phone, tablet, desktop, etc). All console.log calls will be forwarded to the JSConsole.com window.
There are more details plus a couple of useful videos on the Remote Debugging Page.

In Two ways we can see console.log messages
Using WEINRE
Using Eclipse
Method 1:
Use WEINRE remote WEb Inspector in REmote. it is a nodejs package. Steps to install WEINRE.
Install nodejs
run this command to install weinre :npm install -g weinre (for
MACsudo npm install -g weinre)
Then launch WEINRE: weinre --boundHost -all- --httpPort 8082, here
8082 is port number where WEINRE is launched.
Then add the following script tag in the HTML/web page you want to
debug or to see console messages, <script
src="http://xx.xx.xx.xx:8082/target/target-script-min.js#weinredemo"></script>
xx.xx.xx.xx is the IP of your machine.
weinredemo is the ID for your page and you can use any of our own.
Then open the page , where you want to see console messages in any mobile device.
Open this page any webkit
browser,http://localhost:8082/client/#weinredemo
There go to console tab and see the messages.
Method 2:
please connect your mobile via USB drive and see the phone listed in ECLIPSE and need to install ANDROID ADT plugin for eclipse to see the console messages in Eclipse.