Profiling JavaScript code using MiniProfiler - javascript

MiniProfiler can log Ajax calls and display a breakdown of the timings.
Is it also possible to add custom steps to my JavaScript code?

You can time client-side script execution time by using the TimeScript command in a Razor view.
Example from Sample.MVC:
<head>
#this.InitClientTimings()
#this.TimeScript("jQuery 2.0.3", #<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>)
#using (profiler.Step("<head> rendering"))
{
<title>#ViewBag.Title - MVC MiniProfiler Demo</title>
#(this.TimeScript("Our CSS", #<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />))
#RenderSection("head", required:false)
}
</head>
Here the time spent loading the jQuery and CSS scripts are being timed. You could of course inject any client-side code using this function.

Related

Google Appscript WebApp Refresh

Does anyone know of an effective way of triggering a window refresh for a deployed Google Appscript Web Application using Javascript?
I've searched and tested variations of window.location.href = window.location.href, window.reload(true), etc.
Nothing seems to work.
The only work-around that I've found is creating a hidden web-address link and using the .click() command to navigate to the same page (i.e. refresh), but lately, this is causing issues, especially because I now have to keep track of different link addresses.
Does anyone have a better alternative to this?
HTML:
<html>
<head>
<title>Finance Mileage Entry</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<base target="_top">
<?!= include("page-css");?>
<a id="refreshLink" href="<?= ScriptApp.getService().getUrl() ?>?v=home" style="display:none"></a>
JS:
function refresh(){
var link = document.getElementById("refreshLink")
link.click();
};
In order to refresh the Web App, you can just use Window.open(url, windowName), like this:
window.open("https://script.google.com/macros/s/{your-webapp-id}/exec", "_top");
Update:
You could also retrieve the script URL via ScriptApp.getService().getUrl(), instead of writing it yourself. To do that, you would have to retrieve this information from the server-side (you cannot access classes like ScriptApp from the client-side). You have to use google.script.run to execute server-side functions from the client-side:
function retrieveUrl() {
google.script.run.withSuccessHandler(refresh).getUrl();
}
This way, retrieveUrl will execute a function called getUrl from your server code (.gs), which could be something like this:
function getUrl() {
return ScriptApp.getService().getUrl();
}
Finally, when getUrl returns successfully, the success handler will execute a client-side function called refresh (and its return value –the script URL– will be passed as a parameter):
function refresh(scriptUrl) {
window.open(scriptUrl, "_top");
}
Reference:
Window.open

Using html code with a javascript code as a widget in flutter web

I am currently using flutter web and I already have an html button that I want to add inside my flutter app. This html contains a java script as its body. How to add the html with javascript as a widget inside my app? This is the html snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paytabs Express Checkout V4</title>
</head>
<body>
<script
src="https://paytabs.com/express/v4/paytabs-express-checkout.js"
id="paytabs-express-checkout"
data-secret-key="key"
data-ui-type="button"
data-merchant-id="mid"
data-url-redirect="https://my09713z28.codesandbox.io/"
data-amount="3.3"
data-currency="SAR"
data-title="John Doe"
data-product-names="click"
data-order-id="25"
data-ui-show-header="true"
data-customer-phone-number="5486253"
data-customer-email-address="john.deo#paytabs.com"
data-customer-country-code="973"
data-ui-show-billing-address="false"
data-billing-full-address="test test test"
data-billing-city="test"
data-billing-state="test"
data-billing-country="BHR"
data-billing-postal-code="123"
></script>
<script>
</script>
</body>
</html>
Hope you provide me with some help.
You can go something like this. You should put your html releated code in index.html file and in src you need to put a path for your index.html e.g. 'assets/index.html'
import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:ui' as ui;
String viewID = "your-view-id";
#override
Widget build(BuildContext context) {
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
viewID,
(int id) => html.IFrameElement()
..width = MediaQuery.of(context).size.width.toString()
..height = MediaQuery.of(context).size.height.toString()
..src = 'path/to/your/index.html'
..style.border = 'none');
return SizedBox(
height: 500,
child: HtmlElementView(
viewType: viewID,
),
);
}
You can use HtmlElementView for adding html elements inside a flutter web app
https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html
Beware that would only work in flutter web and
Embedding HTML is an expensive operation and should be avoided when a
Flutter equivalent is possible
You should add this html content inside the file web/main.html.
I suggest you to build the button with Flutter and call javascript code with dart like this example calling javascript from Dart
If I understand correctly, your intention is to be able to render your html/javascript as a native widget in flutter.
Unfortunately, I don't think this is technically possible due to the fact that flutter is rendering everything in its own light-weight rendering engine, rather than creating native code that your native runtime executes. The artifact(s) created (even in flutter web) after compilation is a combination of flutter runtime + your compiled code that executes on flutter runtime. Therefore this is not possible to add html/javascript to your flutter code as a widget and run it everywhere.
The solution is to implement your widget in pure Dart code.

nopcommerce 3.80 ender-blocking JavaScript and CSS in above-the-fold content

I'm using the "async" property of Html.AppendScriptParts method in nopcommerce 3.80 like that Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
The google PageSpeed Tools give it a high score which is i expected:
But it seems effect to the other functionalities of website (nivo slider, ajax filter which comes from Seven Spikes plugin,... )
I'm not using js and css bundling feature in nopcommerce.
Can you guys please tell me what is the best solution in my scenarior now ?
Any helps are very appriciated.
Thank you so much.
Here is my code of _Root.head.cshtml:
#using Nop.Core.Domain.Common;
#using Nop.Core.Domain.Seo
#using Nop.Core.Infrastructure;
#{
var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
if (commonSettings.RenderXuaCompatible)
{
Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
}
var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
{
Html.AppendHeadCustomParts(seoSettings.CustomHeadTags);
}
}
<!DOCTYPE html>
<html#(this.ShouldUseRtlTheme() ? Html.Raw(" dir=\"rtl\"") : null) #Html.NopPageCssClasses()>
<head>
<title>#Html.NopTitle()</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="#(Html.NopMetaDescription())" />
<meta name="keywords" content="#(Html.NopMetaKeywords())" />
<meta name="generator" content="nopCommerce" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Html.NopHeadCustom()
#Html.Partial("Head")
#Html.Widget("head_html_tag")
#Html.NopCssFiles(this.Url, ResourceLocation.Head)
#Html.NopScripts(this.Url, ResourceLocation.Head)
#Html.NopCanonicalUrls()
#Html.Action("RssHeaderLink", "News")
#Html.Action("RssHeaderLink", "Blog")
#Html.Action("Favicon", "Common")
#if (displayMiniProfiler)
{
#StackExchange.Profiling.MiniProfiler.RenderIncludes()
}
</head>
<body>
#RenderBody()
#Html.NopCssFiles(this.Url, ResourceLocation.Foot)
#Html.NopScripts(this.Url, ResourceLocation.Foot)
</body>
</html>
First, it's not related to Seven Spikes plugins. This issue is because of async behavior. When you make jquery file to an async, it means application will not wait to load that file and going to load next js file. But other js file are depended on first main file, and that's way you're getting errors.
Let's understand it with current scenario, the default code is:
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
In this case the order of js files are:
Now load jquery min js file asynchronously.
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js", false, true);
And check console:
With this change you will get an error(s).
To resolve this issue, you have to load js min file in one particular order on basis of dependency.
Side Note: this issue is with default code too!! I've tested with nopCommerce 3.80 and 3.90

Referencing JQuery correctly

I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.

ASP.NET MVC 3 How to inject Javascript into the master layout

I am trying out the new razor view engine from MVC 3. The issue that I am having is that I have Javascript that is page specific. I normally have all my Javascript code before the tag closes. I was thinking of putting a section just before I close the body tag on my master layout. Some thing to the effect of:
<script type="text/javascript">
#RenderSection("JavaScript")
</script>
But VS2010 underlines it in green. So which ever pages uses this master layout can have it's Javascript injected Here. How would you guys do it? The reason why I want to do it like this is because then I can add JavaScript from the master layout also in here, other I will have to define a separate script tag just below the #RenderSection.
When I do the following then VS gives me a warning (I don't like warnings):
Validation (HTML 4.01): Element 'link' cannot be nested within element 'link'.
Here is my code for the above warning:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css">
}
How can I get these warnings away?
Here's what I'd do, according to the best practices you should place your scripts at the bottom of the page.
_Layout.cshtml
<html>
<head>
#* ... *#
</head>
<body>
#* ... *#
#RenderSection("Scripts", false)
</body>
</html>
MyView.cshtml
#section Scripts
{
<script src="#Url.Content("~/Scripts/myScript.js")"
type="text/javascript"></script>
}
I would use #RenderSection("head", false) in my _layout page. Then you can inject whatever you want in the head of the page (including script)...and by using false you make it optional on all of your view pages.
You can turn off or modify VS's XHTML validation checking:
http://weblogs.asp.net/scottgu/archive/2005/11/23/431350.aspx
You need to close the link tags.
Like this:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css" />
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css" />
}
And then follow Ryan's answer.

Categories