How to build flutter web app in debug mode? - flutter-web

flutter build web will build my flutter app with obfuscation and minification.
I want my error stack to be readable though.
How should I modify the command?

Try:
flutter build web --profile --dart-define=Dart2jsOptimization=O0
See:
https://github.com/flutter/flutter/blob/720dff6a94bd054e82ec4bf84b5cb802bbc52ddd/packages/flutter_tools/lib/src/build_system/targets/web.dart#L238-L239

There's an issue on github for this feature, feel free to upvote ;)
https://github.com/flutter/flutter/issues/96283

This is a old post, but I found the answer.
If you build the app with this line:
flutter build web --profile --source-maps
Then when you print a stacktrace, you'll get something like this:
Exception: Hello
at Object.wrapException (js_helper.dart:1123:37)
at _MyHomePageState__incrementCounter_closure.call$0 (main.dart:64:7)
at _MyHomePageState.setState$1 (framework.dart:1114:28)
at _MyHomePageState._incrementCounter$0 (main.dart:57:5)
at tear_off.<anonymous> (js_helper.dart:2099:9)
at _InkResponseState.handleTap$0 (framework.dart:909:26)
at tear_off.<anonymous> (js_helper.dart:2099:9)
at TapGestureRecognizer.invokeCallback$1$3$debugReport (recognizer.dart:253:16)
at TapGestureRecognizer.invokeCallback$2 (recognizer.dart:239:6)
at TapGestureRecognizer.handleTapUp$2$down$up (tap.dart:627:11)
If you use --source-maps with a release build, you will still get the dart file and line number, but the class/method names in the stacktrace will be obfuscated.
And, if you copy the lib directory into the root of built web directory, it will display the source code when you click on the dart file/line number in the stacktrace. Also, you can set breakpoints in the dart code, just like you can do when you do flutter run web.

The only way I have found to do this is to use flutter run -d chrome. We would then need to locate where the files on disk are located.

Related

Vue JS Intellij setup

I am working on a Vue js application but am having difficulty getting it to run/debug within IntelliJ. I am currently running it from the command line but I'm interested in getting it to debug in IntelliJ. Not many tutorials out here on getting this set up to work. Is there anyone that has experience in setting up this framework and IDE?
Steps are rather straightforward and described in blogpost:
First, install the JetBrains IDE Support Chrome extension. This will bind the browser debugger environment with IntelliJ in real-time.
start the server with npm serve (can be done from a gutter in package.json):
create a new JavaScript debug configuration, specify the URL your app is running on (usually http://localhost:8080) in it, put the breakpoints right in the source code, and start the debug session.
See also https://blog.jetbrains.com/webstorm/2019/03/get-started-building-apps-with-vue-js-in-webstorm/ for some hints on working with Vue.js in IDEA. And https://medium.com/dailyjs/stop-painful-javascript-debug-and-embrace-intellij-with-source-map-6fe68eda8555
You can add "Run Configuration" for any project to run in Intellij. For this, you must have a run script in package.json.
Refer below link for a screenshot. NPM Run Configuration Sample:
Choose NPM and give like this. Once done, you are all ready for clicking the RUN button available in the toolbar to run the project

ERROR: Can't set up Node.js core modules, when creating Node.js Express app on Webstorm

I am getting the following error when I try to create a Node.js Express app in Webstorm:
Can't set up Node.js v0.12.2 Core Modules Failed to create
C:\Users\Christina.WebStorm10\system\extLibs\nodejs-v0.12.2-src\core-modules-sources\lib\constants.js.
See idea.log for details (on the main menu "Help | Show Log in ...")
Does anyone know why?
Thanks in advance!
The reason is that access to this file is denied.
Remove nodejs-v0.xx.x-src folder, its default location is:
C:\Users\.IntelliJIdea14\system\extLibs
In the settings dialog select Languages & Frameworks > Node.js and NPM
Click on Configure button
In the new dialog accept defaults which is Download from the Internet.
Click on Configure button
I was having the same problem whenever I tried to download the modules Although I didnt find the reason for this I found a solution. Try to download Node.js from their website and use the Get Modules from Directory Option in the cofig window.
Then point the path to c:/Programs and Files(x86)/Node/npm and you should be good to go ;)

Facebook and google maps plugins don't work together in PhoneGap app

I am going to create the app that shows google map and required social login with facebook.
I decided to use:
https://github.com/Wizcorp/phonegap-facebook-plugin
and
https://github.com/wf9a5m75/phonegap-googlemaps-plugin
I don't know what is a reason, but these plugins perfectly work alone, but when I installed them together I got next error:
BUILD FAILED
C:\Users\{USER_NAME}\AppData\Local\Android\sdk\tools\ant\build.xml:577: Jar mismatch! Fix your dependencies
Total time: 1 second
{APP_PATH}\platforms\android\cordova\node_modules\q\q.js: 126
throw e;
^
Error code 1 for command: cmd with args: /s /c "ant debug -f {APP_PATH}\platforms\android\build.xml -Dout.dir=ant-build -Dgen.absolute.dir=ant-gen"
ERROR running one or more of the platforms: Error: {APP_PATH}\platforms\android\cordova\run.bat: Command failed with exit code 8
You may not have the required environment or OS to run this project
I am not experienced in PhoneGap development, but I guess that both plugins are doing some changes in platform dependencies (and rewriting changes of another plugin).
Could anybody help me with this?
I got the answer of google-maps plugin creator:
The facebook plugin contains android-support-v4.jar, and the map
plugin installs another android-support-v4.jar.
Remove one of them.
I took off android-support-v4.jar from com.phonegap.plugins.facebookconnect folder and left it in libs folder. It was solved my issue (fb and g-maps work together).
So I can mark this question as closed now.
I leave this answer for anybody who meets this issue like me.

How to use nodemon in NTVS(Node Tools for Visual Studio)

I was working with Node on Visual Studio Professional 13, and I soon realized that restarting my server for every change in code was becoming a hassle.
So I did some research and discovered that most people used the nodemon to automatically refresh their server. Although the tutorials online used command line to install and run their server with nodemon when I used VS's interface to generate my express project and download nodemon.
My problem is that when I run my server, the server doesnt restart when I update my code. My question is how can run my server through nodemon if I am coding my project using VS
this link also shows people with the same question as me, but the solution in it isn't that clear
https://nodejstools.codeplex.com/workitem/545
the following works for me:
open your Project Properties ("PROJECT" > "YourApp Properties...")
point the "Node.exe path" to nodemon.cmd (click on the button right
of the input field, enter "%AppData%\npm\" in the adress bar, show
all files, select "nodemon.cmd", save the properties form)
start debugger, or use "start without debugging" (Ctrl+F5)
The accepted answer didn't work for me, as there was no nodemon.cmd file in my Nodemon installation. Perhaps things have changed.
This did work, however:
In the project properties, I simply set the Node.exe options to "C:\Program Files (x86)\nodejs\node_modules\nodemon\bin\nodemon.js" server.js
Note that my TypeScript file is server.ts, but I used the compiled filename server.js in the Node.exe options.
Try to use last version of NTVS(Node Tools for Visual Studio).
Now when I run app in debug and change some code server restart and apply changes.
It's amazing in new version!

electron-builder refuses to work with 256 by 256 icon

Im trying to build a electron app using electron builder and I am getting the following error: Error: image /home/runner/work/granio/granio/build/icon.ico must be at least 256x256. This error is suprising because I tripled checked that the icon is in fact, 256x256. Is this a bug with electron? Icon Size
Thanks,
Evan
I had the same problem with docker.
Because I put my electron project in a directory not isolated.
I used an Apache's HTTP server (https://hub.docker.com/_/httpd) and I put the project in the directory usr/local/apache/ with others files.
I suspect that to build an electron project you must have a directory with only project's files. Otherwise, electron-builder throws that error.
I hope this help someone!

Resources