Debugging js inside html page in WebStorm - javascript

I have WebStrom 7. I create a following HTML page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function go() {
alert("hello"); // here a set a breakpoint
}
</script>
</head>
<body onload="go()">
<p>
Test
</p>
</body>
</html>
If I debug this page, I do not get to breakpoint. The page simply displayed in the browser.
If I create a js file and move js code there and add to html link on js file, when the breakpoint is triggered.
How i can debug js inside html page?

Related

Atom: Javascript shows "ReferenceError: document is not defined" after putting code on body HTML

Javascript script shows :
ReferenceError: document is not defined when I run this code
ReferenceError
HTML and JS:
const button = document.querySelector('#click')
button.addEventListener('click',()=>{
alert('clicked')
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>practice</title>
</head>
<body>
<button type="button" id="click" name="button">click me</button>
<script src="Pracitce.js" charset="utf-8"></script>
</body>
</html>
Also when I run HTML on Chrome browser, the click event doesn't fire anything. How can I connect my two files into one? What is wrong after putting 'script' with sources?
Your browser window object has document property in it, you need to link your JS file with your HTML file and then run your HTML file and view the output in the browser.
You can also use console in your browser to run your sample JS code.
You can learn more about the document object here

how can i link my javascript file with html???? I think i have linked properly but not working?

WHAT is problem in linking javascript code to html code???
my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PARUL</title>
<script src="script.js"></script>
<script>
console.log(x)
</script>
</head>
<body></body>
</html>
my javascript code:
var x="hello world";
You have already linked your HTML code with your JS file.
Follow these steps :
Right click on your mouse and you will get the option Inspect at the bottom.
Click on it and you will get the developer tool having multiple tabs in it like Elements,Console,etc.
You just need to click on the Console tab. Then you will able to see the output which you have given the statement console.log("")

Creating Batch Scripts with JavaScript

I'm trying to make a simple page with JS which generates Batch Scrips based on user input.
This is the prototype code and works fine with Chrome, but clicking on link with Firefox downloads the file as .txt (e.g.: file.bat.txt) and IE is completey unresponsive to the link
Where am i going wrong?
Any issues with "data:text/plain;base64,"?
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
click here
<script>
var bat_source = "#echo off\necho Hello world\npause";
document.querySelector("a").href = 'data:text/plain;base64,' + btoa(bat_source);
</script>
</body>
</html>

JavaScript external script alert() function not working

I have something simple. I have an html file and JavaScript file. In the JavaScript file the simple alert() function is called but, it does not work!
I wrote a second line in the JavaScript file to make sure I was not giving the incorrect path console.log() and it works as expected.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="container">
</div>
<script src="functionality.js"></script>
</body>
</html>
In external JavaScript file:
alert('hello'); // does not get executed
console.log( 'hello' ); // gets executed
Why this does not work?
You have probably pressed "prevent this page from creating additional dialog" in your Chrome browser. Try restarting it.

how to load a js file and execute it on CEF

I use CEF(chromium ebedded Framework) load a html page:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="phantom-limb.js" type="text/javascript"></script>
</body>
</html>
and it works ok. now, I modify the page as follow:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
and after cef loaded it, I use cef's ExecuteJavaScript method to execute the same phantom-limb.js, but nothing appear.
how can I load the js file and execute, or, the js file has some limit?
thx:)
As you can see at the end of the source code of you JS file, the startOnLoad config parameter is set to true by default.
In this way a listener to the DOMContentLoaded is added, which is never called because your page is already loaded.
So, you just have to append the line start(); to your source code, then call your ExecuteJavaScript and it will work even after the page is loaded.

Categories

Resources