google chrome console , has a problem in show javascript code
Does not display my codes
Even in debugger , after refresh page or whatever
js script in my page start with : <script type="text/javascript">
my file is php and server is xampp
Syeed Masoud Tayefi indeed you need to add the src to the tag, otherwise the browser not only won't show you the file, neither read it and hence not perform any fuction that has been wrote down. Here is how I do it myself in order to check and debug if need it
<body>
<div> ...whatever goes in here...</div>
<script src="./functions.js"></script>
</body>
Hope my answer help a bit to clarify your question. As You didn't leave any of your code, I can't speak about the unclosed issues, if any.
Hi I'm trying to use this plugin for upload multiple images with vue.js. Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-upload-multiple-image</title>
</head>
<body>
<div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
<vue-upload-multiple-image
#upload-success="uploadImageSuccess"
#before-remove="beforeRemove"
#edit-image="editImage"
#data-change="dataChange"
:data-images="images"
></vue-upload-multiple-image>
</div>
<script src="./dist/vue-upload-multiple-image.js"></script>
</body>
</html>
Unfortunately this code neither gives error nor output. But when I use this cdn it works.
<script src="https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js"></script>
Is there a way to use it without the cdn?. Js file is there and I downloaded it from cdn.
Thanks
The origin of the script should not normally change anything.
Do you use the same version of the plugin? To be sure, you can copy the content of the https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js into your file (right click, save as...).
Is it added to the page? Do you have a plugin like Adblock and does it inform you that it has blocked content? Open your network console and check that the file is downloaded correctly without error (you will see a line with the filename). Did you see the JS code from the network console when you click on the line (to prevent bad serveur configuration)?.
To be sure, you can add something at the end of the script file :
let myTestVar = "JESuisLA";
And verify you can access to myTestVar on the console.
I am new to programming and am having trouble trying to open my Javascipt program to a web browser for testing. How is this done through Sublime Text Edit? I don't see any option for running to a browser. I can go to build then run but it all complies at the bottom of the screen. So how is it run directly to chrome?
Thank you
Browsers load HTML pages. In HTML page you have an option to load and execute JavaScript code via <script> tag.
Create a HTML page
Put it to the same folder with your .JS file
In HTML have a <script> tag that loads your code:
<html>
<head>
<script src="myjsfile.js"></script>
</head>
<body>
</body>
</html>
Open this HTML file in Chrome (drag and drop, double click, etc.)
(Note: Nowadays there are also command line JavaScript programs which are run with NodeJS, but they are not usually for programming novices).
My requirement is to make a link or a button, on clicking it should open a specified location on my computer and I cannot use jquery but I can use javascript.
I tried doing with input tag by coding as below, but did not meet the requirements.
<html>
<head>
...
<meta charset="ISO-8859-1">
<title>Conversion Successful</title>
<link href="xml.css" type="text/css" rel="Stylesheet">
</head>
<body>
<h1 class=heading_position>Conversion Completed Successfully</h1>
<div class="box">
<input readonly="readonly" type="file" value="D:/Office/xmlautomation/">
</div>
</body>
</html>
I'm a beginner in html still figuring out how stuff works. Thanks
This used to be possible in internet explorer (6 and earlier) assuming you didn't care much about controlling how the document/location was opened.
It is no longer possible in IE or any other browser I'm aware of (Chrome/FF) for security reasons (would you want a random site you visited to be able to launch folders/apps on your desktop?).
For the record, the old syntax would've been file://[Host]/D:/Office/xmlautomation/ where [Host] was usually blank so something like...
Office Automation
would've opened the directory in question.
NB: These Urls will still work if they're listed in a file that wasn't retrieved over the web (eg if you drag-and-drop an html file from your computer onto your browser, links like these should work). This is so that local html files which reference each other can be opened without a web server.
You can use the javascript also.
Just tried, it work fine for me as long as C$ is shared.
<html>
<body>
<input onclick="CallMe()" value="ABX" />
<script>
function CallMe() {
// alert('test');
window.open("file://smewara/C$");
}
</script>
</body>
</html>
This should help you out: HTML/JS open a window to the C$ drive
When I open Developer Tools in Google Chrome, I see all kinds of features like Profiles, Timelines, and Audits, but basic functionality like being able to set breakpoints both in js files and within html and javascript code is missing! I tried to use the javascript console, which itself is buggy - for example, once it encounters a JS error, I cannot get out of it unless I refresh the whole page. Can someone help?
Are you talking about code within <script> tags, or in the HTML tag attributes, like this?
Click
Either way, the debugger keyword like this will work:
Click
N.B. Chrome won't pause at debuggers if the dev tools are not open.
You can also set property breakpoints in JS files and <script> tags:
Click the Sources tab
Click the Show Navigator icon and select the a file
Double-click the a line number in the left-hand margin. A corresponding row is added to the Breakpoints panel (4).
Use the sources tab, you can set breakpoints in JavaScript there. In the directory tree underneath it (with the up and down arrow in it), you can select the file you want to debug. You can get out of an error by pressing resume on the right-hand side of the same tab.
You also can give a name to your script:
<script>
... (your code here)
//# sourceURL=somename.js
</script>
ofcourse replace "somename" by some name ;) and then you will see it in the chrome debugger at "Sources > top > (no domain) > somename.js" as a normal script and you will be able to debug it like other scripts
Refresh the page containing the script whilst the developer tools are open on the scripts tab. This will add a (program) entry in the file list which shows the html of the page including the script. From here you can add breakpoints.
Another intuitive simple trick to debug especially script inside html returned by ajax, is to temporary put console.log("test") inside the script.
Once you have fired the event, open up the console tab inside the developer tools.
you will see the source file link shown up at the right side of the "test" debug print statement. just click on the source (something like VM4xxx) and you can now set the break point.
P.S.: besides, you can consider to put "debugger" statement if you are using chrome, like what is being suggested by #Matt Ball
My situation and what I did to fix it:
I have a javascript file included on an HTML page as follows:
Page Name: test.html
<!DOCTYPE html>
<html>
<head>
<script src="scripts/common.js"></script>
<title>Test debugging JS in Chrome</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<script type="text/javascript">
document.write("something");
</script>
</div>
</body>
</html>
Now entering the Javascript Debugger in Chrome, I click the Scripts Tab, and drop down the list as shown above. I can clearly see scripts/common.js however I could NOT see the current html page test.html in the drop down, therefore I could not debug the embedded javascript:
<script type="text/javascript">
document.write("something");
</script>
That was perplexing. However, when I removed the obsolete type="text/javascript" from the embedded script:
<script>
document.write("something");
</script>
..and refreshed / reloaded the page, voila, it appeared in the drop down list, and all was well again.
I hope this is helpful to anyone who is having issues debugging embedded javascript on an html page.
I was having the same problem too, how to debug JavaScript that is inside <script> tags. But then I found it under the Sources tab, called "(index)", with parenthesis. Click the line number to set breakpoints.
This is Chrome 71.
Adding debugger; on top at my script worked for me.
I know the Q is not about Firefox but I did not want to add a copy of this question to just answer it myself.
For Firefox you need to add debugger; to be able to do what #matt-ball suggested for the script tag.
So on your code, you add debugger above the line you want to debug and then you can add breakpoints. If you just set the breakpoints on the browser it won't stop.
If this is not the place to add a Firefox answer given that the question is about Chrome. Don't :( minus the answer just let me know where I should post it and I'll happily move the post. :)
If you cannot see the "Scripts" tab, make sure you are launching Chrome with the right arguments. I had this problem when I launched Chrome for debugging server-side JavaScript with the argument --remote-shell-port=9222. I have no problem if I launch Chrome with no argument.
I came across this issue, however my inline function was withing an angularJS view. Therefore on the load i could not access the inline script to add the debug, as only the index.html was available in the sources tab of the debugger.
This meant that when i was opening the particular view with my inline (had no choice on this) it was not accessible.
The onlly way i was able to hit it was to put an erroneous function or call inside the inline JS function.
My solution included :
function doMyInline(data) {
//Throw my undefined error here.
$("select.Sel").debug();
//This is the real onclick i was passing to
angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
}
This mean when i clicked on my button, i was then prompted in the chrome consolse.
Uncaught TypeError: undefined is not a function
The important thing here was the source of this : VM5658:6 clicking on this allowed me to step through the inline and hold the break point there for later..
Extremely convoluted way of reaching it.. But it worked and might prove useful for when dealing with Single page apps which dynamically load your views.
The VM[n] has no significant value, and the n on equates to the script ID. This info can be found here : Chrome "[VM]"
Using Visual Studio (2012) I had the same issue and switching to IIS Express solved the problem!
The script tag's type attribute did not factor into it.
For some reason the Visual Studio Development Server does not provide everything Chrome needs to enable the breakpoints.
This is an extension of Rian Schmits' answer above. In my case, I had HTML code embedded in my JavaScript code and I couldn't see anything other than the HTML code. Maybe Chrome Debugging has changed over the years but right-clicking the Sources/Sources tab presented me with Add folder to workspace. I was able to add my entire project, which gave me access to all of my JavaScripts. You can find more detail in this link. I hope this helps somebody.
You have to add type="text/javascript" to the script blocks for them to be picked up as script. For example:
<script type="text/javascript"> ...your code here... </script>
for someone like me: just want to
(add breakpoint to) debug normal js code
<script> ... </script> inside/embedded html
Steps:
Sources -> Page -> Top -> find your html -> click -> right side show html and js script -> add breakpoint -> debug