We Keep Coding

How to get javascript variables in a debugger when using webpack

I am developing a react application with the bundler Webpack.
I would like to debug this application with a browser console (here i use chrome).
I have used source-maps and equivalent in my webpack config:
devtool = 'inline-source-map';
Now errors are displayed with the exact line of the original file.
The problem is that i want to access to live variables with the console.
So far I found two ways to display them:
1- Add a library in webpack.config.js
output: {
library: "lib"
},
export variable in the code export var foo = 34; and finally inside the browser console use lib.foo.
2- use breakpoint and access to variable set in the file
Is there another solution to access live variables?
Thanks

There are other solutions, but that means defining global variables and that should be avoided as it can have side effects in the code you're trying to debug, so you might run into problems that are not identical with and without exposing the variables, which makes your debugging experience very frustrating.
Using breakpoints is the best you can do for debugging purposes. The browser debuggers, especially the Chrome devtools, are extremely powerful and it's absolutely worth spending some time to get familiar with them.
Because pausing the app at every breakpoint you set for getting to a certain point can be tedious, you can use conditional breakpoints. One way is to use the debugger statement in your code, in that case you can guard it by any JavaScript you like, for instance this will only pause when the input to the function is 5:
function debug(input) {
if (input === 5) {
debugger;
}
// Other code
}
Another way is to add conditional breakpoints in the Chrome devtools. As you've configure source maps, you can set the breakpoints in the original source under Sources > top > webpack:// > .
To set a conditional breakpoint you simply right-click a line and choose Add conditional breakpoint... and enter the condition, e.g. input === 5. You can also Edit breakpoint... to change or add a condition to an existing breakpoint. For more information about breakpoints in Chrome see Pause Your Code With Breakpoints.
In the Sources tab you can also right click anywhere and Add folder to workspace so you can edit the sources directly and save the changes to disk (in older versions of Chrome it's a bit more complicated to add a folder to the workspace). To let Chrome know that the source maps of webpack correspond to your workspace, you can right-click any webpack source map and select Map to File System Resource... and you simply choose the correct file of the workspace. After that, all the sources of webpack should automatically be mapped to the correct files. Now you can set the breakpoints there and when you change something and save it (Ctrl + S or Cmd + S), webpack will recompile it. See also Set Up Persistence with DevTools Workspaces.
Sometimes setting a breakpoint might be too much effort for only getting values of variables. With just console.log you probably end up with a lot of different messages. To make it easier to find the messages you need, you can use console.group which lets you put messages inside a group, that can be expanded and collapsed. The groups can also be nested. Use console.groupCollapsed if you want the group to be collapsed initially.

How to pass a key/value to the dataLayer in webpage context casperjs?

I'm attempting to track some actions on a webpage that requires me setting a value in the datalayer.
I'd like to do the casperjs/phantom equivilant to this...
dataLayer.push({test: "boom"});
Directly into the web browser's console. This works manually.
It's been a while since I've used casper/phantom so closely. Im currently trying the following...
this.evaluate('console.log(\'dataLayer.push({test: "boom"});\'); console.log("dataLayer");');
Is there a way to achieve my goal?
Also, bonus 'highfive' to anyone who can also allow me to follow this up by accessing the datalayer to verify its been set.
--Edit--
I am also currently launching the runs with options...
--ssl-protocol=any --web-security=no

Can one stop "semantic ui" from writing info to the console?

Using semantic-ui: http://semantic-ui.com/
It writes all kinds of info to the console, not just when an error occurs.
Is there an easy way to stop it from communicating with the console?
I am writing a laboratory page for an Ajax API, and developers will look at their console on my page to see what's going on when some Ajax calls are made. I don't want to see un-related messages about semantic-ui from the semantic-ui framework.

Just turn off debug mode for modules you don't need debug. Example for module 'modal' below.
There are 2 ways:
1) Set default value for module. Place it at the start of your script (before usage of module):
$.fn.modal.settings.debug = false;
2) Set value for each case of module usage:
$('.modal').modal({'debug': false});
The same for every other semantic-ui module such as popup etc.

console.log() in windows 8 javascript/visual studio 2012

When I use console.log("Some text output") in javascript in Visual Studio 2012 for Windows 8 metro programming where is the text being sent to? Where can I view it? I've got the "Output" panel up but I do not see the log text.
Am I not using the right function? Is there another function I must use to print to Output?

To actually see the JavaScript console select DEBUG > Windows > JavaScript Console in the Visual Studio menus. Then you can use the good old console.log() to write to it, but you can also use the related WinJS functions:
There is WinJS.log() to log something after creating the function with WinJS.Utilities.startLog():
WinJS.Utilities.startLog({type: "info", tags: "custom" });
WinJS.log("my message", "info", "custom");
Here's some additional information on the WinJS logging functions:
startLog(options): Configures a logger that writes messages containing the specified tags to the JavaScript console.
The options object must contain a type which is supposed to be one of error, warn, info or perf. Unless you want to capture all log entries, also add tags to the object containing a space-separated list of tags you want to be logged.
WinJS.log(message, tags, type): This function does not exist by default. However, it is created by your startLog() call. You could also create it manually but since you want logging to the console using startLog() is the way to go.

If you need to debug the application in a live environment, you can use a simple on-screen console.log replacement, which you can activate using the ~ key.
Source code here:
https://gist.github.com/4012355

You can also view the log through the EventViewer. Here are the steps to enable this:
Open Event Viewer
Navigate to Application and Services Log
Expand Microsoft/Windows/AppHost
Left click to select Admin
Right click Admin and then select View => Show Analytic and Debug Logs

I might be replying to an old post, or maybe you have discovered your way to serve your purpose, but I tried console.log() and WinJS.log() and the javascript console seem to return 'undefined' for both. Also, I made sure with 'debugger;' statement that that code was is executing. Now I am assuming here that you need logging for debugging purposes then what I would prefer to "print" to my screen now is:
<body>
<label id="lblMessage">test</label>
</body>
and then in JS :
function f(message) {
document.getElementById('lblMessage').innerText = message;
}
( and then, place a call to this function where needed - in my case it was, app.onactivated function)

How to force update of design changes to clients using xPages?

I am bulding a webpage using xPages and I am making constant changes to script and design, this include both server and client javascript , stylesheet and image changes.
Each time I change a javascript or stylesheet I want to see my changes in the webbrowser and I also want my users to get the latest changes when they access the webpage.
I know I can use Shift-Reload, or CTRL-reload and clear my webbrowser cache. and I also know that I can change the objects expiration date, but I want a smoother and better controlled way to do this.
Looking for any kind of best practice for doing this.
Thanks
Thomas

In the xsp.properties file for the application or on the server for server wide use you can set xsp.application.forcefullrefresh=true. The xsp.properties file documentation says:
# Application refresh
# When this property is set to true, then a full application refresh is requested when
# the design of a class changes (means that all the data are discarded in scopes).
# xsp.application.forcefullrefresh=false
The new XSP Portable Command Guide says "This property was introduced in Notes/Domino 8.5.3. It is set to false by default and is particularly useful during the development phase of an XPages application."
I have not fully tested this behavior but it sounds promising. You could/should of course only set it to true WHILE you make the changes. once stable, set it back.
/Newbs

Adding to Ferry's answer and your comment;
Instead of "?dummy=randomvalue", you can use "?version=2.1". So it will be cached but when you change design, you can just increase the version.
There's a problem with this approach as some proxy servers won't cache anything with query params. Better to rename the file directly, adding date or version number to it. It will always work.
To disable caching temporarily use Fiddler2. It's easy to enable and disable in one place across any web client. As well as added benefits for the http request tracking features.

To fully disable any caching add url + '"?dummy=" + #Unique();' to every url to javascript or image files...

The way I am reading this question is that you want every change you make to appear immediately on the client's browser or client. Are you really sure you want to do this? It sounds like you are not doing any testing so any typos, bugs, crashes, etc will be passed on to your users. Sounds like a bad plan to me. I hope I am wrong and that you are using a template and pushing only your fully tested changes up to an production version instead of making the changes in the production version.
I would just put out a schedule of when changes are going to be pushed up to production and let the users reload their browser or client at that time. Either that or do it during off hours and when they next log on, they get the newest changes.

Adding to Ferry's answer and your comment;
Instead of "?dummy=randomvalue", you can use "?version=2.1". So it will be cached but when you change design, you can just increase the version.

maybe you could look at how domino can control caching of url's.
http://www.ibm.com/developerworks/lotus/library/ls-resp_head_rules/

NEwbs answer is a good one but it is useful to note that in Firefox there is a very useful plug in called "web developer" from Chris Pederick that allows you to disable the cache.
http://chrispederick.com/work/web-developer/
The other really useful one is Firebug which is just amazing - It makes any HTML work much easier
https://addons.mozilla.org/en-US/firefox/addon/firebug/

I did found another solution by putting my css and js in a theme it is easy to just rename the files.
as described here
http://goo.gl/vFTii

Why do not we use the window.location.reload()...
Which does the same like ctrl+F5
It reloads the page, which is similar to context.reloadpage