Log component is a visual console to display internal logs of PrimeFaces. Using log client side API, you can also use the component.
<style>
.ui-log {
left: 750px;
top: 250px;
}
</style>
<div class="card">
<p:log id="log"/>
<h5 class="mt-0">Client Side API</h5>
<p:commandButton type="button" id="info" value="Info"
onclick="PrimeFaces.info('This is an info message.')" styleClass="mr-2" />
<p:commandButton type="button" id="warn" value="Warn" onclick="PrimeFaces.warn('This is a warn message.')" styleClass="mr-2" />
<p:commandButton type="button" id="debug" value="Debug"
onclick="PrimeFaces.debug('This is a debug message.')" styleClass="mr-2" />
<p:commandButton type="button" id="error" value="Error"
onclick="PrimeFaces.error('This is an error message.')"/>
<h5>Ajax Request</h5>
<h:form id="form">
<h:panelGrid id="grid" columns="4" cellpadding="7">
<p:outputLabel for="name" value="Name:"/>
<p:inputText id="name"/>
</h:panelGrid>
<p:commandButton value="Submit" update="grid" styleClass="mt-3" />
</h:form>
</div>