I've recently been stuck in an odd situation. I have to run a webpage through the .net WebBrowser. The site i'm running through it has rounded corners but because I'm running it through the IE browser it doesn't display them. I've been injecting some stuff already straight into the page (once it finishes loading) - Remember that. I first decided to inject CurvyCorners.js to allow it correctly display the rounded edges. Much to my dismay, however, CurvyCorners sucks and is severely glitchy. To get it to work in the first place, though, I had to go into the source and force it to run because it was waiting for the document to load, which it had, just only before the script was injected.
I've read online that Css3Pie works much better so I decided to try and get it to work instead. I've gotten it all to inject (the Css3Pie.js file injects fine and the HTC is loaded using the behavior css value). I can't seem to convince the HTC file to run without it receiving the loaded event. I've tried doing the same thing I did to CurvyCorners but even if I put the init() function call right at the end of the source code, nothing runs.
Does anybody know what I'm doing wrong? I can't seem to find any onloaded or ready events in the main Css3Pie.js file, I only find references to it in the .htc file.
You either user the js file OR the htc file. If you are using the .htc file, make sure you are sending it with the right MIME type (text/x-component).
The htc should run without any JS to trigger it.
Related
I am trying to find the way to debug javascript code inside the php file. I have a lot of javascript code embedded inside the php file.
I can debug php code using netbeans with the help of XDebug. I can also debug javascript separately inside html or js file with browser like chrome or firefox.
What I want is to debug javascript code inside the php file if it is possible. I am sure a lot of people will be using javascript embedded with php file. I don't like it personally, but I have to work it on. I know I can write the code separately in js file and then can debug with browsers, but it's lot of code, take time for the separation.
Can anybody here suggest me a way if it's possible what I am asking.
Debug Javascript in netbeans 7.4 inside PHP project
https://netbeans.org/kb/docs/php/debugging.html
https://confluence.jetbrains.com/display/PhpStorm/Debugging+PHP+and+JavaScript+code+at+the+same+time+in+PhpStorm
https://blog.jetbrains.com/phpstorm/2014/06/debugging-php-and-javascript-code-at-the-same-time/
IMHO, without even looking it up, i don't think that it is (nor should) be feasible.
Here's why:
Your PHP gets processed on the server side, that's when XDebug kicks in and enables you to breakpoint all your PHP code. Then the server output gets to the client, that's when the actual JS is processed inline in the parsed HTML. Which means you would have to intercept the HTML in some way, parse it, detect eventual inlined JS scripts... and set your breakpoint(s) at that time (yes on each run), then output to client, which parses the HTML yet again to render it and process eventual breakpoints. It would be a tedious process and even more tedious to get to work i guess and that is why nobody even tried making an extension for that.
To my knowledge, inlined JS is also a lot harder to debug and i never saw an actual setup that would allow breakpointing embedded tags in a static HTML document directly from the IDE, which would've been somewhat a little easier to achieve than breakpointing JS in PHP...
Your best shot i guess would be to externalise your JS in separate files and only hard code <script src="path/to/your/app.js"></script> in your PHP templates, which indeed would be much more comfortable to work with on the long run anyways.
Then you would be able to breakpoint all the stuff in app.js, plus have an actual front-end architecture, syntax-highlighting, impress your boss, make your life a lot easier, the world a better place, etc.
Also, for reference: How to debug JavaScript code with Netbeans? (answer #45515159)
And read on: https://netbeans.org/kb/docs/webclient/html5-js-support.html
Edit: seems like setting JS breakpoints in static HTML tags is feasible in Visual Code for example -> https://github.com/Microsoft/vscode-chrome-debug/issues/122
I don't know if I am late, but, I came across the following website and was able to setup the debugger for Javascript and PHP which supports to debug embedded JavaScript in PHP scripts.
source: https://abcmemo.com/2017/04/20/debug-php-and-javascript-in-visual-studio-code/
The website uses PHP.exe as a web service.
It is also possible to use IIS, Apache or others.
Requirements:
IDE: Visual studio code
Extension: PHP debug
Extension: Debugger for (Chrome, Firefox or Edge)
Xdebug set in php.ini
Extension in browser (optional): PHP xdebug if you want to debug on trigger.
You need to have two debuggers running at the same time one for PHP and one for JavaScrpit.
PHP sample
JavaScript sample
I worked with a lot of wordpress templates where I had to deal with some js inside my php files. Assuming that you can run your code on a server, you can easily debug your output in dev tools in chrome (if using chrome). Chrome also allows for setting of breakpoints so you can go line by line, and since your browser ultimately runs the js, you can monitor your code behavior without dealing with the php. That was my main way of dealing with this issue.
I also recommend separating as much js as possible into separate files in your assets folder. Depending on your project, you rarely have to inline your code, In my opinion it's messy to include a lot of JS right in your php, unless you use onclick="" or onchange="" attributes (which can also be handled with event listeners.
Aside from that, console.log() the crap out of everything.
I helped my self with the following steps if it could help any body else
Note:- If your rendered code is inline specific to java-script then it would hard to debug like this.
Run the required page of your application using browser like chrome, edge etc
Open the inspection page by pressing f12 or (Ctrl+Shift+I), Or you can right click on the page see the option for the inspection and click on it.
Goto sources and double click on the source file(this will be probably your php file).
If code not loaded then reload the page by pressing f5 or Ctrl+R, you will see your java-script code there embedded with the html after rendering, then you can put the break point wherever you want and debug through the browser tools(you can see some buttons there to guide you about debugging like step-over,step-into etc).
You will also see errors there regarding java-script,
I have a React project, that is nearly finished. So naturally I build it and configured my nginx server to host it.
For building I used react-snap (no serverside rendering applied here).
Now I have this really strange behavior I noticed. When I browse on my site, everything runs smooth and is fine. I can use all kinds of links on the site without problems. Reloading with Ctrl+R works fine as well. But as soon as I don't use any link on the page and don't open another tab (or make a browserreload of the used tab), but manually type in another urlpath of my site in the browser, while being on the site (any supage of the site really), it kind of crashes.
By crashes I mean, elements get completely distorted. It's like they are loaded on top of each other. Now the strange part of it is the fact, that this doesn't happen in dev, but only when I use the static files I build for prod.
Can someone recognise the source of this strange behaviour?
I mean it obviously has something to do with loading a subroute without using an internal link, while no full reload is performed.
I can provide as much additional information as necessary, if anyone may have a clue, where this behavior could come from. But really I don't know where to start, so I reduced the question to the pure description of what's happening.
I'm having a weird issue that I can't seem to figure out by looking at the developer tools. All of my javascript files seem to be loading when I look at the 'network' tab in Firefox, but every time I refresh it seems (quite randomly) one or two of my javascript files will not be functioning properly.
I am super confused as to what could be causing this. I am loading all my <script> tags at the bottom of my html document before the closing </body> tag. Is there somewhere else I should be loading them for firefox? When I test this on my dev server everything loads fine, but when I upload it to AppEngine some of my js files just choose not to load.
Is there some weird thing with timeouts or loading order for firefox that I should be aware of? Or some random setting that I have turned off somewhere? I can't seem to find any documentation on the matter, either, so any links to reading would be appreciated.
Thanks!
To be clear, this isn't Firefox specific issue, FF just happens to be the browser that you are encounter it in. This is a common issue when loading js assets at runtime.
tl:dr
If you are loading assets from different locations that can cause runtime inconsistencies, shoot, even if you are requesting two separate assets from the same location you can run into issues since they are occurring in separate requests and are subject to network performance.
Option One:
Consolidate the js assets that are being render inconsistantly.
So if you're loading the following:
jquery.js
script-one.js
script-two.js
Then concat them into one asset:
jquery.js
scripts.js
Option Two:
Use a module system like require or browserify.
Longer Answer
If you are loading assets into the browser at runtime that require each other to be loaded in order to function there will always be a certain degree of risk if you aren't using any sort of module loader or build process to mitigate the solution.
Say you have to following situation
You have jquery and three plugins which needs to be loaded in a particular order. Just because you have your tags stacked in a particular order doesn't guarantee that is the order they will be available at runtime. Take the following:
<script src="jquery.js"></script>
<script src="modal.js"></script>
<script src="widget.js"></script>
Its very possible that these could load jquery > widget > modal, then jquery > modal > widget on the next. It might seem like someone is messing you, but that's just the world wide webs doing its thing. As I stated above there are common ways to solve this problem that are already well vetted and I suggest looking into them. This is also one of the main features on ES6 that people are VERY excited to for.
Hope that clears up your FF gremlins! Cheers.
Because of a system of dependencies that are less formalized than I'd like, I now have a very, very large "master" JS file that contains a pretty large kitchen sink for use in every page in my app; that is, once you've logged in.
It only takes a few seconds to load, but those few seconds aren't great for a first-time experience at the logged-in homepage. So, I'd like to find a way of loading my script on my login page, so that when the browser requests it on the homepage, it either gets a 304 Not Modified response, or simply knows not to re-request it. Here's what I've tried.
Just including the <script>
This unfortunately doesn't work because the script in question doesn't have "definition guards" in place. Including it on the page messes up the login page because of certain <div>s it expects to have present. It's built through dojo, and I don't want to hack the built file, so I don't want to surround its code in such a check.
Grab it with XHR
I actually had this fix in place for a while, and it appears to work okay in Chrome; once the login page is completely loaded, my script then sends out an XHR to "js/masterFile.js" and does nothing with it. The assumption is that as long as the cache headers are okay, the browser will hold onto it when it later needs that file as a script. As I said, it turns out most browsers don't seem to work this way. Some reuse the "text" they got from the XHR, others seem to cache scripts differently from other content; it's possible that's a security-related issue to them.
Load it in an iframe
This is kind of entering rocky territory, as I don't like iframes, and it's an extra request. But, doing this would at least let the browser cache the script in the right way. It introduces a lot of code complication though, and I'm hesitant to settle on this.
If it helps at all, the scripts are AMD-compatible; but, the master script in question is a "boot layer" that contains the basic definitions of require/define.
Well, I just found a possible way of doing this; I don't currently have time to thoroughly test it, but it appears to work on a basic level.
<script src="myMasterScript.js" type="text/definitelynotjavascriptnopenosir"></script>
This works in an interesting way. I can see that the request is made for the script source, AND if it's valid JavaScript, it will execute. (As found from just referring to the JQuery CDN) However, the browser's console will essentially squelch any kind of errors that occur from running it; ie, "Oh. Maybe I wasn't supposed to run that".
For my own purposes, I still need to figure out, based on the JQuery scenario, whether this might still mess up the page to some degree.
I've been building a site. At some stage I noticed that IE display was a little broken and Chrome had all but rendered nothing but the body tag (empty), and FF all looked good.
After throwing my keyboard around the room and bashing my head against my mouse, I discovered the problem. I had left (don't ask how or why, must have been some lightning speed cut and paste error) an HTML comment unclosed in an inline script block.
<script type="text/javascript">
<!--
...
</script>
I'm guessing (not tested) the problem would have either not come up, or manifested itself in a far more noticeable way if the script was external. So anyways, I got to thinking, is there ever a time when you have a really good reason to write inline script??
No. Write Unobtrusive Javascript.
If you want your Javascript to run as early as possible, it might make sense to include inline Javascript, since it will run before any other HTTP requests have necessarily completed.
And in some cases, you're including Javascript from a 3rd party provider and you don't really have a choice. Certain ad systems, as well as Google Analytics, spring to mind.
If the script must be dynamically generated (say by a PHP or ASP.NET MVC page) would be one reason to have it inline :-)
Depends on how much JS do you plan to write. If you're writing many support routines (lots of validation checks, text processing, animation and effects) then it makes sense to have the code in a separate file. This allows code reuse and removes a lot of junk from your HTML page.
On the other hand, there is no need to put 10 lines of code, or a single function (a refresh JS comes to mind) in a separate file. It will also load slightly faster, since the browser does not need to make an additional HTTP request to download the separate JS file.
Most XSS vulnerabilities can only be exploited using inline javascript.
It's not necessarily enough of a reason, but the pages will load faster. To this end, sometimes, even when you write the script in another file, you want it to show up as inline on the client side.
I sometimes place javascript inline in pages that get partially reloaded (to bind some events to newly added form-fields for example) and / or pages that use some unique javascript that I will not use on any other page.
Having many external scripts can ultimately slow down the page as the browser must call each file separately. Combining the JavaScript into one file or into the page itself can sometimes alleviate this problem.
On the other hand, I believe the browser may cache a script file once it's been called for the first time so if you have a lot of the same code across your site, external is the way to go.
I work a good deal in something called Flex, which combines XML and ActionScript to create the final bytecode. It is ALWAYS best practice to separate the two as much as possible. That way, you can very clearly and easily separate the View (the HTML or MXML in my case) from the Controller (the script)
It also means that you do not have to worry about looking through five files for one line of code -- all of your code is in one place.
File caching is the reason to have external js and css files. Even if you only have one HTML page, this page is likely to be updated often and so will be downloaded by the browser as often. If the js (and css) are in the HTML page, that too will be downloaded often. Keeping them separate will keep the HTML file smaller and will download faster. The js and css files will have been cached so will not be continually downloaded. That is assuming these files are not updated very often.