How to debug iOS react-native app when using visual studio? - xcode

I have recently started working on an iOS app that uses react-native. I'm using Visual Studio Code for writing javascript/typescript code. I would like to debug javascript and swift code in parallel.
I have tried using "Start debugging" option in VSCode but it doesn't help me in debugging the Swift code and it seems to fail at times.
I have tried looking at forums and posts but to no avail.
This is what my configuration (launch.json) file looks like:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
I am not sure what is the correct setup for debugging Javascript (VSCode) and Swift (Xcode) simultaneously. Any help is appreciated.

Related

Using Visual Studion Code to connect to the gdb-server of the OP-TEE which is running in the QEMU

I am setting up the op-tee in ARM-64. and I'm wondering if it is possible to debug it using visual studio code running under ubuntu 18.04.
So far I was able to compile and run the op-tee in QEMU. and also being able to connect the gdb-server using the command line gdb (following this link: https://www.op-tee.org/docs/debug/).
Now I would like to use some GUI instead of gdb. Since I was working wih visual studio code, so I was wondering if it is possible to configure vsCode to do so?
I have tried installing the cortex-debug extension (I'm not sure if that it the right one) and also tried c/c++ debug attach as well. But I cannot make them work!
Here is my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "(gdb) Attach",
"type": "cppdbg",
"request": "attach",
"program": "${workspaceFolder}/optee_os/out/arm/core/tee.elf",
"miDebuggerServerAddress": "localhost:1234",
"processId": "${command:pickProcess}",
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
},
{
"text": "optee"
}
]
},
{
"cwd": "${workspaceRoot}",
"executable": "${workspaceFolder}/optee_os/out/arm/core/tee.elf",
"name": "Debug Microcontroller",
"request": "attach",
"type": "cortex-debug",
"servertype": "openocd"
}
]
}
I expect to be able to debug the arm application by remotely connecting to the gdb-server which is running under QEMU using the Microsoft visual code.
Any suggestion of using extensions is appreciated.
I found the solution which works for me:
First it is needed to install the Native Debug extension for VS Code.
Then Add the following configuration into the launch.json file:
{
"type": "gdb",
"request": "attach",
"name": "Attach to QEMU",
"executable": "${workspaceFolder}/optee_os/out/arm/core/tee.elf",
"target": "localhost:1234",
"remote": true,
"cwd": "${workspaceRoot}",
"gdbpath": "~/devel/optee/toolchains/aarch64/bin/aarch64-linux-gnu-gdb"
}
Notes:
You can connect to QEMU only if the app is not running:
It should either be at initial state before typing c in QEMU
or it is stopped in a breakpoint
There should be no other clients connected to it.
Reference:
http://austinhanson.com/vscode-gdb-and-debugging-an-os

While debugging protractor UI tests in Visual Studio Code breakpoints are not hit

I have an Angular 2+ project with Protractor UI tests with a layer of CucumberJS over it, thus I can define steps in Gherkin.
In Visual Studio Code I have defined launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"stopOnEntry": false,
"args": [
"${workspaceRoot}/protractor.conf.js"
],
"outFiles": [
"./dist/out-tsc"
]
}
],
"compounds": []
}
When I press F5 all the tests are executed and they all success, however no breakpoint is hit. On the other hand there is no problem with hitting breakpoints in WebStorm, I just point to the protractor.conf and it works.
Question: What more should I declare in launch.json to enable hitting the breakpoints in Visual Studio Code?

Debugging MSTest Unittests in Visual Studio Code

I am trying to use Visual Studio Code to Debug a MSTest unit test project. But the tests just run and the breakpoint is never reached.
Here is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Test (console)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "C:\\Program Files\\dotnet\\dotnet.exe",
"args": ["test"],
"cwd": "${workspaceRoot}",
"console": "internalConsole",
"stopAtEntry": false,
"internalConsoleOptions": "openOnSessionStart"
},
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
}
]
}
How can I debug a unit test (MSTest)? This same problem exists for XUnit.
If you are using the latest version of VS Code (I'm using v1.29.0), debugging unit test is in-built feature.
You need to first build the solution dotnet build for the test run & debug options to appear.
Try https://github.com/Microsoft/vstest-docs/blob/master/docs/diagnose.md#debug-test-platform-components (assumes you're using dotnet-cli tools 1.0.0)
> set VSTEST_HOST_DEBUG=1
> dotnet test
# Process will wait for attach
# Set breakpoint in vscode
# Use the NETCore attach config from vscode and pick the dotnet process
Try and reload VS Code, worked for me.
Press Ctrl+Shift+P which opens the command palette and then :
Reload Window
Before building, remember to include in your .csproj file
<GenerateProgramFile>false</GenerateProgramFile>
or else it will not know what to run...
Program.cs(160,21): error CS0017: Program has more than one entry point defined. Compile with /main to specify the type that contains the entry point. [/Users/.../Fraction.csproj]

How to debug not Core ASP.NET MVC5 running on IIS Express using Visual Studio Code?

I have this project, ASP.NET MVC5 WebApi, it was created using Visual Studio 2015.
<TargetFrameworkVersion>v4.5.2</TargetFrameworkVersion>
Happens I'm temporarily unable to use VS2015 to work, so I'm working in Visual Studio Code by now.
I was able to configure almost everything I need to work, OmniSharp is working fine, so I have intellisense, I'm able to build the solution with msbuild and run IIS Express to test the work. Everything I need but debug. =/
I'm actually able to attach vscode to iisexpress instance, but it keeps the breakpoints in gray saying that no symbols were loaded. I tried to use the symbolPath in the attach configuration, had no success.
All the debug console says:
--------------------------------------------------------------------------------
You may only use the Microsoft .NET Core Debugger (clrdbg) with Visual Studio
Code, Visual Studio or Visual Studio for Mac software to help you develop and
test your applications.
--------------------------------------------------------------------------------
Maybe the clrdbg just cant target .NET 4.5.2?
Maybe they need more information on how to load the symbols?
Maybe I am missing a directive on iisexpress command line?
Any help will be most appreciated. Thanks. :)
Here is how I build: (Both of them works fine)
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "cmd",
"isShellCommand": true,
"args": ["/c"],
"showOutput": "always",
"tasks": [
{
"taskName": "build",
"isBuildCommand": true,
"suppressTaskName": true,
"args": [
"dotnet build",
"${workspaceRoot}\\MyWebApi.sln"
],
"showOutput": "always",
"problemMatcher": "$msCompile"
},
{
"taskName": "build with msbuild",
"isBuildCommand": true,
"suppressTaskName": true,
"args": [
"C:\\Program Files (x86)\\MSBuild\\14.0\\Bin\\MSBuild.exe",
"${workspaceRoot}\\MyWebApi.sln",
"/p:Configuration=Debug;GenerateFullPaths=true",
"/t:Rebuild",
"/m",
"/v:m",
"/property:GenerateFullPaths=true"
],
"showOutput": "always",
"problemMatcher": "$msCompile"
}
]
}
Here is how I run iisexpress:
"C:\Program Files\IIS Express\iisexpress.exe" /config:".\.vs\config\applicationhost.config" /site:MyWebApi /apppool:Clr4IntegratedAppPool /trace:e
Here how I attach:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to IIS Express",
"type": "coreclr",
"request": "attach",
"processName": "iisexpress"
}
]
}
Note that it's now possible to debug C# code in Visual Studio Code using the C# for Visual Studio Code extension by OmniSharp. From what I've seen so far the experience is actually really good:
https://blogs.msdn.microsoft.com/visualstudioalm/2016/03/10/experimental-net-core-debugging-in-vs-code/
With OmniSharp now supporting debugging with the C# extension, I was able to debug c# with IIS.
My setup is very similar to yours, however, in your launch.json change the type line from "type": "coreclr" to "type": "clr". This should let you debug .NET framework projects whether they are using IIS or not.

How do I debug HTML and JavaScript together in VSCode (Visual Studio Code)?

I want to run and debug an html page with a javascript file in a mini website when I hit F5.
How do I configure VSCode to open the html page in the browser and then allow me to set breakpoints in the javescript file which will be triggered by my interaction with the app in the browser?
In Visual Studio this would "just work", because it fires up its own web server, IIS Express. In VSCode I'm not sure how I set up launch.json and/or tasks.json to create a simple node.js web server and serve index.html.
I have seen some examples of debugging javascript apps, for example this launch.json:
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch Bjarte's app",
"type": "node",
"program": "app.js",
"stopOnEntry": true,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArguments": [],
"env": {},
"sourceMaps": false
},
{
"name": "Attach",
"type": "node",
"address": "localhost",
"port": 5858,
"sourceMaps": false
}
]
}
This will run the js file, but I don't understand how I can interact with the app.
It is now possible to debug Chrome web pages in vscode via Chrome remote debugging with a extension released by Microsoft.
Debugger for Chrome
As you can see from that page there are two modes of debugging, Launch and Attach. I only managed to use the Attach mode, probably because i don't have a server running. This extension has all important debug tools functional: local variables, breakpoints, console, call stack.
Another reason to revisit vscode is that it now has IntelliSense support for ECMAScript 6, which displays methods not visible in other "IntelliSense like" solutions I've tried, like SublimeCodeIntel or the latest version of WebStorm.
It seems what I want to do is not possible in VSCode (yet?). My solution at the moment, is to use the node package live-server. Install with
> npm install -g live-server
Then open VSCode, right-click any file in the root folder of your project and select "Open in Console". Then type
> live-server
to start a server with your project as root folder. Live-server will open your default browser and also monitors your project folder for any file changes, and reloads the html page every time you do any changes.
I should mention that my solution using live-server doesn't allow me to debug my app in VSCode, only run it in the browser. I am debugging in Chrome.
Like others have said you install this:
You can use https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
And if you are not running a localhost but some HTML and JavaScript you can use this launch.json code.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html"
}
]
}
VSCode will use node to launch your app, which means your app is running on some PORT. You can interact with your app by visiting http://localhost:PORT/
If you set a breakpoint in app.js it should be hit once you visit your site that is running local via node.
Here is a nice demo https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs
I didn't want to run a server just for some HTML and JavaScript (unlike a similar example) this VS Code launch configuration along with the 'Debugger for Chrome' extension did the trick on my Windows 10 machine:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch HTML file",
"type": "chrome",
"request": "launch",
"file": "${file}"
}
]
}
In case you have # in path like C:\C#\mypage.htm, you may use FF & ex. fileBasename or Similar variable - does not work in Chrome:
.vscode\launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch HTML file",
"type": "firefox",
"request": "launch",
"file": "C:/C%23/${fileBasename}"
}
]
}
Or simple full path tested with node.js:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/${fileBasename}"
}
]
}
You can use https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
In the launch.json you just have to pu the url value of the server that you are using and then you can debug your html + js with your editor visual studio code
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://127.0.0.1:8081",
"webRoot": "${workspaceFolder}"
}
]
}

Resources